屬性或方法“componentNames”未定義，即使已定義

Question

我收到如標題所示的錯誤。我讀了一些有關此錯誤的信息，大多數答案都說它與引用不存在的方法/數據屬性有關，或者是由愚蠢的拼寫引起的。在下面的程式碼區塊中，我正確引用了現有的 componentNames 資料屬性。我注意到，只有當我在 componentNames 上使用 Object.keys() 方法（用於取得元件名稱）時，才會出現此問題。

<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 warn]: 屬性或方法「componentNames」未定義 實例但在渲染期間引用。

Answer 1

嘗試使用空數組初始化 componentNames，然後在建立的鉤子內將 Object.keys($options.components) 指派給它：

data() {
    return {
      componentNames: []
    }
  },
created(){
    this.componentNames=Object.keys(this.$options.components)
},
  components: {
    A,
    B
  },