Harta atau kaedah 'componentNames' tidak ditakrifkan walaupun ia ditakrifkan

Question

Saya menerima ralat seperti yang ditunjukkan dalam tajuk. Saya telah membaca sedikit tentang ralat ini dan kebanyakan jawapan mengatakan ia ada kaitan dengan merujuk kaedah/harta data yang tidak wujud, atau disebabkan oleh ejaan bodoh. Dalam blok kod di bawah, masalah hanya berlaku apabila saya merujuk dengan betul kaedah componentNames 数据属性。我注意到，只有当我在 componentNames 上使用 Object.keys() sedia ada (digunakan untuk mendapatkan nama komponen).

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

Ralat:

[Vue warn]: Sifat atau kaedah 'componentNames' tidak ditentukan contoh tetapi dirujuk semasa pemaparan.

Answer 1

Cuba gunakan pemula tatasusunan kosong componentNames，然后在创建的钩子内将 Object.keys($options.components) tetapkan padanya:

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