嘗試在 Vuejs 中對數組進行排序時計算屬性出現問題？

sundar 发表于 Dev

孫達

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>

嘗試在 Vuejs 中對數組進行排序時計算屬性出現問題？我收到錯誤為 ---vue/no-side-effects-in-computed-properties(sortedItem)

我的代碼在 Codepen 中運行良好，但我不確定為什麼在本地執行時它在 vscode 中不起作用。與 ---vue/no-side-effects-in-computed-properties 完全一樣是什麼意思

代碼筆鏈接：- https://codepen.io/dhanunjayt/pen/oNGXjZL

阿瑪羅克茲

您應該修改計算屬性內的數據變量。這就是它拋出那個錯誤的原因。

請看下面修改後的代碼

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。