無法在螢幕上顯示組件

Question

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

這段程式碼有什麼問題？我試圖讓組件資料在我輸入新資料時動態顯示。

Answer 1

如果 getCorpora 已更新/回應，您的程式碼應該可以正常運作。我剛剛創建了一個演示，您可以看一下並嘗試找出您所面臨問題的根本原因嗎？

演示（我剛剛添加了一個輸入，並且在模糊時，輸入值已添加到 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>