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>How to sort array by name and price in Vuejs?
I have array of values, where I looped entire items and displayed initially, later. i have taken two buttons one for sorting array by name, and another for sorting array by val.
You could make use of computed properties.
Logic
You should not use duplicate computed properties. All your listing logic should be done in a single computed method as done below
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>