TypeError：无法读取未定义的属性（读取“产品”）

Question

我正在尝试获取产品，然后检查产​​品 pId 是否在数组中，如果是则过滤。 当我软刷新“TypeError：无法读取未定义的属性”（读取“产品”）时出现错误，几乎就像当计算试图获取数据时我的“this.products”尚未填充一样。尝试添加一些 if 语句来检查数据，但没有运气。

<script>
export default {
  data() {
    return {
      popular_products: [],
      products: [],
    }
  },

  computed: {
    bestsellers() {
      const keywords = this.popular_products
      let array = []
      for (var index = 0; index < keywords.length; index++) {
        const keyword = this.products.data.products.product.filter(
          (product) => product.pId == keywords[index].ProductNumber
        )
        array = array.concat(keyword)
      }
      return array
    },
  },

  mounted() {
    axios
      .get(
        'https://myurl/admin/api/collections/get/popularproducts?token=account-9306f9192049d3c442e565f2de5372'
      )
      .then((response) => (this.popular_products = response.data.entries))

    axios
      .get('https://myurl/products.json')
      .then((response) => (this.products = response))
  },
}
</script>

Answer 1

问题出在这一行：

let keyword = this.products.data.products.product.filter(product => product.pId == keywords[index].ProductNumber);

阅读更具体：data.products。

你看，computed 属性 bestsellers 在你的 axios 调用完成之前被评估。

因此，Vue 在data 中找不到products，因为您的this.products 没有data 键。

最好的解决办法是改变这个分配：

- .then(response => (this.products = response)); // delete this line
+ .then(response => (this.products = response.data.products)); // add this line

更新评论后。

if (this.products.product) {
  return this.products.product.filter(...)
} else {
  return []
}