根据 select 选项值过滤 Vue 列表

Question

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 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))
  );
},

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

<Price v-model="selectedFrom" />

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

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' }
      ]
    }
  },

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

Here is a sandbox what I have so far.

Answer 1

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.

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.