根据 select 选项值过滤 Vue 列表

Question

我尝试根据 selected 值用 2 个 select 列表过滤我的列表。好像我的计算过滤器不起作用？

您应该可以在 'Price from' 和 'Price to'

上筛选列表

List.vue 我的计算过滤器属性:

filteredData() {
  const LowerCaseSearch = this.search.toLowerCase();
  return this.products.filter(
    product =>
      (product.name.toLowerCase().includes(LowerCaseSearch) ||
        product.category.toLowerCase().includes(LowerCaseSearch)) &&
      (!this.checked.length || this.checked.includes(product.category)) &&
      (!this.selectedFrom.length || this.selectedFrom.includes(product.price)) &&
      (!this.selectedTo.length || this.selectedTo.includes(product.price))
  );
},

在我注册的组件中，我使用 v-model 绑定到计算的属性 selectedFrom

<Price v-model="selectedFrom" />

如何在一个 v 模型中绑定到另一个属性 selectedTo，我的过滤器有什么问题？

我还使用前缀 'From' 和 'To' 放在选项前面。

data: () => {
    return {
      selectedFrom: '0,00',
      priceFrom: [
        { prefix: 'From', text: '0,00', value: '0,00' },
        { prefix: 'From', text: '200,00', value: '200,00' },
        { prefix: 'From', text: '400,00', value: '400,00' }
      ],
      selectedTo: 'No max',
      priceTo: [
        { prefix: 'To', text: '400,00', value: '400,00' },
        { prefix: 'To', text: '600,00', value: '600,00' },
        { prefix: 'To', text: '800,00', value: '800,00' },
        { text: 'No max', value: 'No max' }
      ]
    }
  },

有没有更优雅 D.R.Y 的方法来做到这一点？

这是 sandbox 目前为止我所拥有的。

Answer 1

您应该将对象绑定到 <price> 组件上的 v-model。通过这种方式，您可以将多个值传入和传出组件，而无需使用多个 props。

我还建议您将选择中的 value 转换为数字，这样更容易使用它们与您的价格进行比较。

您还在沙箱（<price> 组件）中定义了同名的数据属性和计算属性，这是不可能的。所以你应该删除数据属性并坚持使用计算的属性来处理你的数据。

使用我建议的更改对您的 sandbox 进行分支。

根据 select 选项值过滤 Vue 列表

Filter Vue list based on select option value

vuejs2

computed-properties

select-options

vue-filter