Vue.js 如何在vuetify中使用v-btn筛选产品列表？

我目前正在尝试使用按钮筛选对象列表

我知道v-btn和v-card环路目前并不相互依赖，但我无法确定如何将这两个部分链接起来，以便在按下相应按钮时仅正确显示正确的类别

谢谢你的帮助

{{category.text}}
{{product.name}

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"

没问题！我强烈建议您在遇到Vue问题时阅读。它简洁、易于理解，并且对于框架的几乎所有基本用例都有各种各样的示例