javascript - Vue.js 2 : How to filter array without mutation?

Question

我有一个非常简单的 Laravel/Vue js 网站，我有一个我想要过滤的产品列表。

const app = new Vue({
el: '#main-content',
data: {
    forfaits: window.forfaits,
},
methods: {
   filterData: function (val) {
        console.log(val)
        this.forfaits = this.forfaits.filter(item => {
          return item.internet >=val[0] && item.internet <= val[1] ;
      });
      return this.forfaits;
      
  }

HTML

 <div class="product-item offre" v-for="forfait in forfaits">
 .....
 ..... 
 .....

在这种情况下它可以工作，但原始产品数组(forfaits)发生了变化。 如何在不改变原始值的情况下进行过滤？

Answer 1

您想要有两个属性:

1. 包含所有未过滤项目的真实来源属性，用户界面永远不会使用该属性。
2. 具有要显示的实际列表的计算机属性，如果没有过滤器，则随时返回完整列表；如果有过滤器，则返回过滤后的列表。这就是您将 UI 绑定(bind)到的内容。

你不需要任何方法；计算属性将随着过滤器的更改而自动更新。