如何在点击"selectAll“时以及在选择任何过滤器之前显示所有产品？

Question

**我正在用Vue & Firebase创建一个网络商店。过滤器工作，但我希望它显示所有的产品，然后再选择一个特定的过滤器。以下是过滤器的链接，此外，我还有一个显示所有产品的链接：**

<v-list-item link>
  <v-list-item-content @click="selectAll()">
    <v-list-item-title>All Categories</v-list-item-title>
  </v-list-item>
<v-list-item link>
  <v-list-item-content @click="selectElectronics()">
    <v-list-item-title>Electronics & Lights</v-list-item-title>
  </v-list-item-content>
 </v-list-item>
 <v-list-item link>
    <v-list-item-content @click="selectKitchen()">
      <v-list-item-title>Kitchen</v-list-item-title>
    </v-list-item-content>
 </v-list-item>
 <v-list-item link>
   <v-list-item-content @click="selectHobbies()">
      <v-list-item-title>Hobbies & Free-time</v-list-item-title>
   </v-list-item-content>
 </v-list-item>

<v-col
             sm="5"
             md="6"
             v-for="item in filterCategoryItems"
             :key="item.name"
           >

**需要在计算中进行哪些更改才能正常工作？它以前对注释行起作用，但现在我不知道渲染错误的原因："TypeError: Cannot read property 'includes‘of undefined“**

   export default {
 data() {
return {
categoryChoice: "",
};
 },
 methods: {
   selectAll() {
     this.categoryChoice = "";
   },
   selectElectronics() {
     this.categoryChoice = "electronics";
   },
   selectKitchen() {
     this.categoryChoice = "kitchen";
   },
   selectHobbies() {
     this.categoryChoice = "hobbies";
   },

computed: {
   filterCategoryItems() {
     return this.menuItems.filter(
       filterItem => filterItem.category == this.categoryChoice 
     //    (filterItem) => filterItem.category.includes(this.categoryChoice) 
     );
 },
 menuItems() {
     return this.$store.getters.getMenuItems;
   },
   basket() {
     return this.$store.getters.getBasketItems;
   },
   favItems() {
     return this.$store.getters.getFavItems;
   },
 },
};

Answer 1

你的脚本没有正确构建。如果你修复了缩进，你可能已经注意到了。另外，data()应该返回一个对象：

<script>
export default {
  data() {
    return {
      categoryChoice: ""
    };
  },
  methods: {
    selectAll() {
      this.categoryChoice = "";
    },
    selectElectronics() {
      this.categoryChoice = "electronics";
    },
    selectKitchen() {
      this.categoryChoice = "kitchen";
    },
    selectHobbies() {
      this.categoryChoice = "hobbies";
    }
  },
  computed: {
    filterCategoryItems() {
      return this.menuItems.filter(
        (filterItem) => filterItem.category == this.categoryChoice
        //    (filterItem) => filterItem.category.includes(this.categoryChoice)
      );
    },
    menuItems() {
      return this.$store.getters.getMenuItems;
    },
    basket() {
      return this.$store.getters.getBasketItems;
    },
    favItems() {
      return this.$store.getters.getFavItems;
    }
  }
};
</script>