尝试在 Vuejs 中对数组进行排序时计算属性出现问题？

Question

 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>

Issue with computed property when trying to sort array in Vuejs? I am getting error as ---vue/no-side-effects-in-computed-properties(sortedItem)

My code is working fine in Codepen, But i am not sure why it is not working in the vscode, when executing locally. What does it mean exactly like ---vue/no-side-effects-in-computed-properties

codepen link:- https://codepen.io/dhanunjayt/pen/oNGXjZL

Answer 1

You are supposed to modify the data variables inside the computed property. Thats the reason its throwing that error.

Pls see the modified code 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; 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>