根据类别过滤 Firebase Firestore 条目答案

【问题标题】：Filter Firebase Firestore entries based on category根据类别过滤 Firebase Firestore 条目
【发布时间】：2020-10-09 07:08:00
【问题描述】：

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

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

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" [...]

如何修复错误？

【问题讨论】：

你试过console.log(this.products)吗？
是的，所有产品都在那里。

标签： javascript firebase vue.js filter google-cloud-firestore

【解决方案1】：

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
        )
      }

请检查此代码。

【讨论】：