Vue js 2：如何过滤没有变异的数组？

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. 包含所有未经过滤的项目的真实属性，永远不会被UI使用。
2. 具有要显示的实际列表的计算机属性，如果没有过滤器，则在任何时候都将返回完整列表;如果有过滤器，则返回已过滤的列表。这就是将UI绑定到。
的内容

你不需要任何方法;计算属性将在过滤器更改时自动更新。