类型错误：无法读取 Nuxt 中未定义的属性（读取“__ob__”）

Question

从包含 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>

Answer 1

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

<Nuxt keep-alive/>

更多信息请参阅官方文档

https://nuxtjs.org/docs/features/nuxt-components/

[更新]

您还可以检查是否有某些组件：

   data() {
     return {

     };
   },

看来这是主要问题

Answer 2

问题来自组件悬停事件，与上面的代码片段无关。

Answer 3

也许你可以只使用带有异步函数的创建的。或者更好地仍然使用 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
    }
 },

而且我认为您不需要承诺的回报

Answer 4

就我而言，问题是我没有从

返回对象

data() {}

应该是

data() { return {} }

至少是正确的。请检查与“data(){} 应该返回一个对象”相关的控制台错误