我得到了標題中顯示的錯誤。我讀了一些關于這個錯誤的資訊，大多數答案都說它是關于不存在的方法/資料屬性，或者是由愚蠢的拼寫引起的。在下面的代碼塊中，我componentNames正確地參考了現有的資料屬性。我注意到，只有當我Object.keys()在componentNames.
<template>
<v-container fluid>
<v-row dense>
<v-col
v-for="(comp, n) in componentNames"
:key="n"
:cols="n === 0 ? 2 : 10"
>
<v-card>
<component :is="comp"></component>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import A from '../views/A.vue';
import B from '../views/B.vue';
export default {
name: 'Project',
data() {
return {
//componentNames: ['A', 'B'] // when I use this line of code then it works perfectly
componentNames: Object.keys(this.$options.components) // however, this line doesn't work
}
},
components: {
A,
B
},
};
</script>
錯誤：
[Vue 警告]：屬性或方法“componentNames”未在實體上定義，但在渲染期間被參考。
uj5u.com熱心網友回復：
嘗試componentNames使用空陣列初始化，然后Object.keys($options.components)在創建的鉤子中分配給它：
data() {
return {
componentNames: []
}
},
created(){
this.componentNames=Object.keys(this.$options.components)
},
components: {
A,
B
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370449.html
標籤：Vue.js
上一篇：在IIS上部署VUE應用程式