Unable to display component on screen

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>

What's wrong with this code? I'm trying to have component data display dynamically as I enter new data.

Answer 1

Your code should work fine if getCorpora is 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>