從具有 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>
uj5u.com熱心網友回復：
問題來自組件懸停事件，與上面的代碼片段無關。
uj5u.com熱心網友回復：
也許您可以將 created 與 async 函式一起使用。或者最好還是使用 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
}
},
我也不認為你需要在承諾中得到回報
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/480695.html