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：

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

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