我尝试根据所选值使用 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" />
如何绑定到selectedTo
一个 v-model 中的另一个属性以及我的过滤器有什么问题?
我还使用前缀“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' }
]
}
},
有没有更优雅和干燥的方式来做到这一点?
这是我到目前为止所拥有的沙盒。