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

Posted 2023-02-23

【中文标题】根据选择选项值过滤 Vue 列表

【英文标题】：Filter Vue list based on select option value

【发布时间】：2020-10-09 13:35:04

【问题描述】：

我尝试根据所选值使用 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-model 中绑定到另一个属性 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。

【参考方案1】：

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

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

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

根据我的建议更改您的sandbox。

【讨论】：

谢谢。 created() 钩子我不明白。那不应该在父List 组件中吗？它的目的到底是什么？

你能解释清楚get()和set()方法在这里是如何工作的，所以我可以借鉴一下。非常感谢。

默认情况下，计算属性为getters。但是，您可以将其扩展为还使用所示语法定义 setter。拥有setter，允许您将值分配给您的计算属性（this.computedProp = "Some new value"）。因此，当您尝试从您的属性中获取值时，会运行 getter 方法并显示返回值。当您分配一个值时，setter 方法将运行并接收新值。然后你可以做你想要的这个值，以防每次它发生变化时将它发送给父级。

你对this question有什么线索吗？