<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>
Qu'est-ce qui ne va pas avec ce code ? J'essaie d'afficher dynamiquement les données des composants lorsque je saisis de nouvelles données.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si
getCorporaest mis à jour/responsive, votre code devrait fonctionner correctement. Je viens de créer une démo, pourriez-vous y jeter un œil et essayer de comprendre la cause profonde du problème auquel vous êtes confronté ?Démo (je viens d'ajouter une entrée et lors du flou, la valeur d'entrée a été ajoutée au tableau 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>