Filter Vue list based on select option value

混江龙づ霸主 提交于 2020-06-29 06:41:06

问题


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.


回答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.



来源:https://stackoverflow.com/questions/62467862/filter-vue-list-based-on-select-option-value

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!