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; } }, } }) <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> <div class="bbb"> <button @click="sortKey = 'name'">name</buttton><br /> <button @click="sortKey = 'price'">price</buttton> </div>¿Problema con la propiedad calculada al intentar ordenar la matriz en Vuejs? Recibo un error como ---vue/no-side-effects-in-computed-properties(sortedItem)
Mi código funciona bien en Codepen, pero no estoy seguro de por qué no funciona en vscode, cuando se ejecuta localmente. ¿Qué significa exactamente como ---vue/no-side-effects-in-computed-properties
Se supone que no debe modificar las variables de datos dentro de la propiedad calculada. Esa es la razón por la que arroja ese error.
Por favor vea el código modificado 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; let itemsClone = [...this.items]; // Change added const sortedArray = itemsClone.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.5.17/vue.js"></script> <div id="example-1"> <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> <div class="bbb"> <button @click="sortKey = 'name'">name</buttton><br /> <button @click="sortKey = 'price'">price</buttton> </div> </div>