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
You are not 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>