[Vue warn]: Property was accessed during render but is not defined on instance.
從Vue2重構至Vue3時報錯，vue2時有報錯但仍可運行；vue3報錯並阻擋運行。
*因為專案關係不能使用async/await語法。
父元件
//template
<div class="content">
<childrenComponent
:listData = "listData"
/>
</div>//script
export default {
name:"parentComponent",
components:{
childrenComponent,
},
data() {
return {
listData: [ ],
},
created(){
initData();
},
methods:{
initData(){
this.axios.get("/api/citycafe/list").then(res => {
console.log('citycafe',res.data);
if(res.data.array.length !== 0){
this.list_citycafe = res.data.array;
}
})
.catch(err=>{
console.log("錯誤",err);
});
}
}
}子元件 childrenComponent.vue
//template
<div class="content">
{{ listData[0].name }}
</div>//script
export default {
name:"childrenComponent",
props:["listData"],
}出現報錯
判斷：應該是因為call api抓到資料前，子元件生成卻沒有抓到資料，所以設一個v-if判斷，抓到資料後再渲染元件。
父元件
//template
<div class="content" v-if="!isLoading">
<childrenComponent
:listData = "listData"
/>
</div>//script
export default {
name:"parentComponent",
components:{
childrenComponent,
},
data() {
return {
isLoading: true,
listData: [ ],
},
created(){
initData();
},
methods:{
initData(){
this.axios.get("/api/citycafe/list").then(res => {
console.log('citycafe',res.data);
//判斷的條件也可以改成要渲染的陣列長度是否為0。
if(res.data.array.length !== 0){
this.list_citycafe = res.data.array;
this.isLoading = false;
}
})
.catch(err=>{
console.log("錯誤",err);
});
}
}
}子元件 childrenComponent.vue
//template
<div class="content">
{{ listData[0].name }}
</div>//script
export default {
name:"childrenComponent",
props:["listData"],
}This website uses cookies.