recherche

Maison  >  Questions et réponses  >  le corps du texte

Impossible d'afficher le composant à l'écran

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

P粉308089080P粉308089080449 Il y a quelques jours481

répondre à tous(1)je répondrai

  • P粉204079743

    P粉2040797432023-09-13 10:18:27

    Si getCorpora est 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>

    répondre
    0
  • Annulerrépondre