TypeError: Cannot read properties of undefined (reading 'ob') in Nuxt

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

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

此外，我认为您在承诺中不需要 return

Answer 2

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

TypeError: Cannot read properties of undefined (reading 'ob') in Nuxt

TypeError: Cannot read properties of undefined (reading 'ob') in Nuxt

vue.js

vuejs2

nuxt.js

TypeError: Cannot read properties of undefined (reading '__ob__') in Nuxt

TypeError: Cannot read properties of undefined (reading '__ob__') in Nuxt

vue.js

vuejs2

nuxt.js

TypeError: Cannot read properties of undefined (reading 'ob') in Nuxt

TypeError: Cannot read properties of undefined (reading 'ob') in Nuxt