如何在vuetify中使用v-btn过滤产品列表

Question

我目前正在尝试使用按钮过滤对象列表。

我知道v-btn和v-card循环目前并不相互依赖，但我无法弄清楚如何链接这两个部分，以便在按下各自的按钮时只正确显示正确的类别。

谢谢你的帮助！

<v-row class="my-4">
<v-btn
v-for="category in categories"
text
class="underline"
route :to="category.route"
@click="category.function"
>{{ category.text }}</v-btn>
</v-row>
<v-row 
justify="start">
<v-card
v-for="product in products"
:key="product.name"
class="ma-3 text-center">
<v-img
:src="product.src"
class="mc mt-2"
>
</v-img>
<v-card-title
class="bold justify-center">
<h4>{{ product.name }}</h4>
</v-card-title>
</v-card>
</v-row>

categories: [
{ text: 'All', function: "all()" },
{ text: 'Fruits & Veggies', function: "fruitsVeggies()"  },
{ text: 'Baking', function: "baking"  },
{ text: 'Gadgets', function: "gadgets"  },
{ text: 'Cutting Boards', function: "cuttingBoards"}],  
products: [{...}, {...}, etc]
computed: {
all() {
return this.products.filter(product => {
return product
})
},
fruitsVeggies() {
return this.products.filter(product => {
return product.category === 'Fruits & Veggies'
})
},
baking() {
return this.products.filter(product => {
return product.category === 'Baking'
})
},
cuttingBoards() {
return this.products.filter(product => {
return product.category === 'Cutting Boards'
})
}

Answer 1

Vue计算的属性返回一个动态值
当您将baking作为函数调用时，它应该在控制台中抛出一个错误；它不是一个函数，而是一个属性

相反，您可以定义一个名为filteredProducts的计算属性，该属性根据数据中存储的内容更改过滤器，并循环使用

data() {
productFilter: "all"
}
computed: {
// your computed values
filteredProducts() {
if (this.productFilter === "all") {
return this.all;
}
// etc. For all filters
}
}

然后在您的模板中：

<v-row 
justify="start"
>
<v-card
v-for="product in filteredProducts"