typeError：无法读取未定义的属性（读取（读取＆＃x27; __ ob __＆＃x27;）

Question

从一个带有ProductCard组件到另一个页面的页面导航时出现错误。 我相信错误来自数据获取或已安装（），但我无法解决。 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

我也有同样的问题，我解决了有关组件的静止道具：

<Nuxt keep-alive/>

官方doc

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

[update]

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

   data() {
     return {

     };
   },

似乎这是主要问题

Answer 2

在我的情况下，我没有从中返回对象

data() {}

应该是

data() { return {} }

至少 正确的。请检查与“ Data（）{}应返回对象”有关的控制台错误

Answer 3

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

Answer 4

也许您可以将创建的异步功能使用。或者最好仍然使用NUXT提供的获取。

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

我也认为您不需要回报