<template>
<div v-for="corpus in getCorpora" v-bind:key="corpus.id">
<Corpus v-bind="corpus" />
</div>
</template>
<script>
import Corpus from "../components/Corpus";
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["getCorpora"]),
},
created() {
this.$store.dispatch("fetchCorpora");
},
components: {
Corpus,
},
};
</script>
What's wrong with this code? I'm trying to have component data display dynamically as I enter new data.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Your code should work fine if
getCorporais updated/responsive. I just created a demo, could you take a look and try to figure out the root cause of the issue you are facing?Demonstration (I just added an input and when blurred, the input value was added to the getCorpora array) :
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>