TypeError：无法读取 Nuxt 中未定义的属性（读取 \'__ob__\'）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading '__ob__') in NuxtTypeError：无法读取 Nuxt 中未定义的属性（读取 \'__ob__\'）
【发布时间】：2022-08-15 02:02:12
【问题描述】：

从具有 ProductCard 组件的一个页面导航到另一个页面时会出现该错误。我相信错误来自数据获取或mounted()，但我无法解决它。 ProductCard 组件只是一个带有一些道具的视觉组件。所以错误一定在这里。

完整错误：

client.js:228 TypeError: Cannot read properties of undefined (reading \'__ob__\')
at VueComponent.Vue.$destroy (vue.runtime.esm.js:4004:18)
at destroy (vue.runtime.esm.js:3175:27)
at invokeDestroyHook (vue.runtime.esm.js:6148:59)
at invokeDestroyHook (vue.runtime.esm.js:6153:9)
at invokeDestroyHook (vue.runtime.esm.js:6153:9)
at invokeDestroyHook (vue.runtime.esm.js:6153:9)
at VueComponent.patch [as __patch__] (vue.runtime.esm.js:6501:30)
at VueComponent.Vue.$destroy (vue.runtime.esm.js:4010:8)
at destroy (vue.runtime.esm.js:3175:27)
at invokeDestroyHook (vue.runtime.esm.js:6148:59)

我的页面.vue文件模板：

<template>
  <main>
    <ProductTabs></ProductTabs>

    <div
      v-if=\"productsLoading\"
      class=\"spinner-border\"
      style=\"width: 3rem; height: 3rem\"
      role=\"status\"
    >
      <span class=\"sr-only\">Loading...</span>
    </div>
    <v-container v-else fluid>
      <v-row d-flex justify=\"center\">
        <ProductCard
          v-for=\"product in products\"
          :key=\"product._id\"
          :product-title=\"product.productName\"
          :product-price=\"product.price\"
          :product-img1=\"product.img1\"
          :product-img2=\"product.img2\"
        ></ProductCard>
        <br />
      </v-row>
    </v-container>
  </main>
</template>

我的页面.vue文件脚本：

<script>
export default {
  path: \'/\',
  name: \'ProductsPage\',
  components: { ProductTabs },
  // variables
  data() {
    return {
      products: [],
      productsLoading: false,
    }
  },
  // call the get Poducts method
  mounted() {
    this.getAllProducts()
  },
  // get products from api and save into products array
  methods: {
    async getAllProducts() {
      this.productsLoading = true
      try {
        const data = await this.$axios.$get(\'api/products\')
        this.products = data
        this.productsLoading = false
        return this.products
      } catch (err) {
        this.productsLoading = false
        return err
      }
    },
  },
}
</script>

我从未见过path: \'/\' 和components: { ProductTabs } 没用。否则，在 Nuxt 内容中使用 fetch() 或 asyncData() 钩子可能更好，但从我目前所见，这里没有错。有关在此处获取数据的更多信息：nuxtjs.org/docs/features/data-fetching#the-fetch-hook 错误可能来自其他地方。
正如您所说，问题确实来自其他地方，它来自组件悬停事件！

标签： vue.js vuejs2 nuxt.js

【解决方案1】：

问题来自组件悬停事件，与上面的代码 sn-p 无关。

【讨论】：

您好@kissu，您可以在答案中添加更多描述吗
@eli 据我记得，我们离线解决了这个问题。这与此处发布的代码完全无关，因此我没有提供更多细节。

【解决方案2】：

也许您可以只使用 created 与 async 功能。或者最好还是使用 Nuxt 提供的 fetch。

 asynce fetch() {
    this.productsLoading = true
    try {
      const data = await this.$axios.$get('api/products')
      this.products = data
      this.productsLoading = false
      
    } catch (err) {
      this.productsLoading = false
      return err
    }
 },

我也不认为你需要在承诺中得到回报

【讨论】：

尝试了您的解决方案，但出现了同样的错误。

【解决方案3】：

我有同样的问题，我用组件上的 keep-alive 道具解决了：

<Nuxt keep-alive/>

【讨论】：