Nuxt/Vue2: TypeError: Cannot read properties of undefined (reading '__ob_

The error appears when navigating from one page with the ProductCard component to another. I believe the error comes from the data fetching or the mounted(), but I haven´t been able to solve it. The ProductCard component is just a visual one with some props. So the error must be here.

Full error :

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)

My page .vue file template :

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

    <div
      v-if="productsLoading"
      
      style="width: 3rem; height: 3rem"
      role="status"
    >
      <span >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>

My page .vue file script :

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

CodePudding user response：

Maybe you can just use the created with the async functiion. or better still use the fetch provided by 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
    }
 },

Also i dont think you will need a return in the promise

CodePudding user response：

The issue was coming from a component hover event, nothing related to the code snippet above.