var example1 = new Vue({
el: '#example-1',
data: {
// sort: item,
items: [{
price: '1',
name: 'vv'
},
{
price: '22',
name: 'vv'
},
{
price: '55',
name: 'vv'
},
{
price: '77',
name: 'vv'
},
{
price: '123',
name: 'vv'
},
{
price: '53',
name: 'vv'
},
]
},
methods: {
sortBy(arr, key) {
return arr.sort(function(a, b) {
if (a[key] < b[key]) return -1
if (a[key] > b[key]) return 1
return 0
})
},
}
})<!-- v-for - sort array by name and price -->
<ul id="example-1">
<li v-for="item in items">
{{ item.message }} {{ item.name }}
</li>
</ul>
<hr />
<div class="bbb">
<button @click="sortbyname">name</buttton><br/>
<button @click="sortbyname">message</buttton>
</div>如何在Vuejs中按名稱和價格對陣列進行排序？
我有一組值，我在其中回圈了整個專案并最初顯示，稍后顯示。我使用了兩個按鈕，一個用于按名稱對陣列進行排序，另一個用于按價格對陣列進行排序。
我采用了名為 sortBy 的方法并嘗試對陣列進行排序，但問題來了，我無法排序并且不確定如何與陣列值鏈接。
代碼筆鏈接：- https://codepen.io/dhanunjayt/pen/oNGXjZL
參考代碼筆鏈接：- https://codepen.io/dustindowell/pen/OXMEaG
uj5u.com熱心網友回復：
你可以利用computed屬性。
邏輯
- 使用計算屬性回圈陣列。
- 更新按鈕點擊排序的鍵，這使得計算屬性重新執行。
您不應使用重復的計算屬性。你所有的串列邏輯都應該在一個單一的計算方法中完成，如下所示
var example1 = new Vue({
el: '#example-1',
data: {
// sort: item,
sortKey: 'name',
checked: false,
searchString: "",
items: [
{ price: '1', name: 'mm' },
{ price: '22', name: 'aa' },
{ price: '55', name: 'dd' },
{ price: '77', name: 'gg' },
{ price: '123', name: 'kk' },
{ price: '53', name: 'mn' },
]
},
computed: {
sortedItems: function () {
let searchString = this.searchString;
const sortedArray = this.items.sort((a, b) => {
if (a[this.sortKey] < b[this.sortKey]) return -1
if (a[this.sortKey] > b[this.sortKey]) return 1
return 0
});
if (!searchString) {
return sortedArray;
} else {
searchString = searchString.trim().toLowerCase();
const search_array = sortedArray.filter((item) => {
if (item.name.toLowerCase().indexOf(searchString) !== -1) {
return item;
}
});
return search_array;
}
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="example-1">
<ul>
<input type="text" v-model="searchString" placeholder="Filter" />
<p>sortKey = {{sortKey}}</p>
<li v-for="item in sortedItems">
<input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="item.checked" />
{{ item.price }} - {{ item.name }}
</li>
</ul>
<div class="cecont" v-if="!checked">
<p>text content</p>
</div>
<hr />
<div class="bbb">
<button @click="sortKey = 'name'">name</buttton><br />
<button @click="sortKey = 'price'">price</buttton>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/371632.html
標籤：javascript Vue.js
上一篇：Vue3：輸入“數字”boolean'不可分配給型別'number'
下一篇：訪問嵌套的api資料（vue）