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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>