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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika
getCorporadikemas 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>