根据选择选项值过滤Vue列表 [英] Filter Vue list based on select option value

问题描述

我尝试根据所选值使用 2 个选择列表过滤我的列表.我的计算过滤器似乎不起作用?

I try to filter my list with 2 select lists based on the selected value. It seems like my computed filter is not working?

您应该能够过滤价格来自"和价格至"的列表

You should be able to filter the list on 'Price from' and 'Price to'

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

List.vue My computed filter property:

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

In my registered component I use v-model to bind to the computed property selectedFrom

<Price v-model="selectedFrom" />

如何绑定到一个 v-model 中的另一个属性 selectedTo 以及我的过滤器有什么问题?

How do I bind to the other property selectedTo in one v-model and what's wrong with my filter?

我还使用前缀From"和To"放在选项前面.

I also use a prefix 'From' and 'To' to put in front of the options.

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 的方法来做到这一点?

Is there a more elegant and D.R.Y way to do this?

这是我目前拥有的沙盒.

推荐答案

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

You should bind an object to your v-model on the <price> component. This way you can pass multiple values to and from your component, without having to use multiple props.

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

I would also suggest you convert your value in your selects to numbers, so it's easier to use them to compare to your prices.

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

You've also defined data properties and computed properties in the sandbox (<price> component) with the same name, this is not possible. So you should remove the data properties and stick to the computed ones to handle your data.

您的沙盒 的分支以及我建议的更改.

Fork of your sandbox with my suggested changes.

这篇关于根据选择选项值过滤Vue列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！