La propriété ou la méthode 'componentNames' n'est pas définie même si elle est définie

Question

J'ai reçu l'erreur comme indiqué dans le titre. J'ai lu un peu sur cette erreur et la plupart des réponses indiquent qu'elle est liée au référencement d'une propriété de méthode/données inexistante, ou est causée par une orthographe stupide. Dans le bloc de code ci-dessous, le problème ne se produit que lorsque je référence correctement la méthode componentNames 数据属性。我注意到，只有当我在 componentNames 上使用 Object.keys() existante (utilisée pour obtenir le nom du composant).

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

Erreur :

[Vue warn] : La propriété ou la méthode 'componentNames' n'est pas définie instance mais référencé lors du rendu.

Answer 1

Essayez d'utiliser l'initialisation d'un tableau vide componentNames，然后在创建的钩子内将 Object.keys($options.components) attribuez-lui :

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