Question

我尝试根据所选值用2个选择列表过滤列表。看来我的计算过滤器不起作用？

您应该能够过滤“价格自”和“价格至”上的列表

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

您应将一个对象绑定到v-model组件上的<price>。这样，您可以在组件之间传递多个值，而不必使用多个属性。

我还建议您将选择的value转换为数字，以便更轻松地将它们与价格进行比较。

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

sandbox的叉子，并附上我建议的更改。

根据选择选项值过滤Vue列表

1 个答案: