时间戳

首页 > 解决方案 > 根据类别过滤 Firebase Firestore 条目

javascript - 根据类别过滤 Firebase Firestore 条目

问题描述

我需要根据类别过滤条目。这是我得到的错误。

TypeError：无法在 VueComponent.filteredItems 读取 null 的属性“过滤器”

Vue组件：

<v-card
      v-for="product in filteredItems"
      :key="product.id"
      class="mx-auto"
      max-width="344"
    >
 [...]

计算：

...mapState('products', ['products']),
        filteredItems() {
          let filtered = this.products
          if (this.search) {
            filtered = this.products.filter(
              item => item.name.category.toLowerCase().indexOf(this.search.toLowerCase()) > -1
            )
          }
          return filtered
        }
      },

导出默认值：

export default {
      props: {
        filterCategory: String
      },
      data: () => ({
        search: 'Personal',

Firestore JSON 条目：

name: {action:"button",  category: "Personal" [...]

如何修复错误？

标签： javascriptfirebasevue.jsfiltergoogle-cloud-firestore

解决方案

TypeError：无法在 VueComponent.filteredItems 读取 null 的属性“过滤器”

意思是 this.products 在某些时候为空。当您将默认状态设置为 null 然后在第一次加载时，当尚未从 firebase/api 获取数据时，它仍然为 null。所以一个简单的解决方案是

if (this.search) {
        filtered = this.products && this.products.filter(
          item => item.name.category.toLowerCase().indexOf(this.search.toLowerCase()) > -1
        )
      }

请检查此代码。

推荐阅读