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>¿Cómo ordenar la matriz por nombre y precio en Vuejs?
Tengo una matriz de valores, donde hice un bucle de elementos completos y los mostré inicialmente, más tarde. Tomé dos botones, uno para ordenar la matriz por nombre y otro para ordenar la matriz por valor.
Podría hacer uso de propiedades computed .
Lógica
No debe usar propiedades calculadas duplicadas. Toda la lógica de su listado debe hacerse en un solo método computado como se hace a continuación
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>