Tidak dapat memaparkan komponen pada skrin

Question

rreeee

Apa yang salah dengan kod ini? Saya cuba memaparkan data komponen secara dinamik semasa saya memasukkan data baharu.

Answer 1

Jika getCorpora dikemas kini/responsif, kod anda sepatutnya berfungsi dengan baik. Saya baru sahaja membuat demo, bolehkah anda melihat dan cuba mengetahui punca masalah yang anda hadapi?

Demo (saya baru sahaja menambah input dan pada kabur nilai input telah ditambahkan pada tatasusunan getCorpora) :

Vue.component('corpus', {
  props: ['childmsg'],
  template: '<p>{{ childmsg }}</p>'
});

var app = new Vue({
  el: '#app',
  data: {
    corpus: '',
    getCorpora: [{
        id: 1,
      name: 'Corpus A' 
    }, {
        id: 2,
      name: 'Corpus B' 
    }, {
        id: 3,
      name: 'Corpus C' 
    }]
  },
  methods: {
    addCorpus() {
      if (this.corpus) {
        const index = this.getCorpora.at(-1).id + 1
            this.getCorpora.push({
            id: index,
          name: this.corpus
        })
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Add corpus : <input type="text" v-model="corpus" @blur="addCorpus">
  <div v-for="corpus in getCorpora" v-bind:key="corpus.id">
    <Corpus :childmsg="corpus.name"></Corpus>
  </div>
</div>