Die Eigenschaft oder Methode „componentNames“ ist nicht definiert, obwohl sie definiert ist

Question

Ich habe den im Titel angezeigten Fehler erhalten. Ich habe ein wenig über diesen Fehler gelesen und in den meisten Antworten heißt es, dass er mit dem Verweis auf eine nicht vorhandene Methode/Dateneigenschaft zusammenhängt oder durch dumme Rechtschreibung verursacht wird. Im folgenden Codeblock tritt das Problem nur auf, wenn ich korrekt auf die vorhandene componentNames 数据属性。我注意到，只有当我在 componentNames 上使用 Object.keys()-Methode verweise (die zum Abrufen des Komponentennamens verwendet wird).

<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>

Fehler:

[Vue-Warnung]: Eigenschaft oder Methode „componentNames“ ist undefiniert Instanz, wird aber beim Rendern referenziert.

Answer 1

尝试使用空数组初始化 componentNames，然后在创建的钩子内将 Object.keys($options.components) 分配给它：

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