时间戳

首页 > 解决方案 > 单击“selectAll”时以及在选择任何过滤器之前如何显示所有产品？

vue.js - 单击“selectAll”时以及在选择任何过滤器之前如何显示所有产品？

问题描述

**我正在使用 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：无法读取未定义的属性'包含'”**

   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;
   },
 },
};

标签： vue.js

解决方案

您的脚本未正确构建。如果你修复了缩进，你可能已经注意到了。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>

推荐阅读