vue.js prop does not get rendered in component

Question

I am facing an issue with Vue.js prop rendering. I have two components: poi-point-adder one that dynamically creates children forms, and the form child one poi-component (that gets created). This is how they look like:

poi-point-adder :

var poiAdderComponent = Vue.component('poi-point-adder', {
  data: function(){
    return {
      children: []
    }
  },
  methods: {
    add() {
      this.children.push(poiComponent);
    }
  },
  mounted: function () {
    this.children = [];
  },
  template: `
  <div>
      <h1 class="title">Creator</h1>
      <div>
        <template v-for="(child, index) in children">
          <poi-component :id="index"></poi-component>
        </template>
      </div>
      <button class="button is-primary" @click="add()">+</button>
  </div>
  `
});

and

poi-component :

var poiComponent = Vue.component('poi-component', {
    props: {
        index: String
      },
      data: {
      },
      methods: {
      },
    template: `
    <div :poi_index="index">
      <p>Hi n {{index}}</p>
    </div>`
    });

The issue occurs with the second one. When I create new instances, the index prop does not get rendered (yet poi_index is given the right index):

What am I doing wrong?

Answer 1

On the poi-component you shouldn't be expecting the prop named index , but id .

And also: you don't need the <template></template> around the component.

poi-component.vue

var poiComponent = Vue.component('poi-component', {
  props: {
    id: String
  },
  data: {},
  methods: {},
  template: `
    <div :poi_index="id">
      <p>Hi n {{id}}</p>
    </div>`
});

poi-point-adder.vue

var poiAdderComponent = Vue.component('poi-point-adder', {
  data: function(){
    return {
      children: []
    }
  },
  methods: {
    add() {
      this.children.push(poiComponent);
    }
  },
  mounted: function () {
    this.children = [];
  },
  template: `
  <div>
      <h1 class="title">Creator</h1>
      <div>
        <!-- you are passing down the prop "id" with the
        value of "index" -->
        <poi-component
          v-for="(child, index) in children"
          :key="index"
          :id="index"
        ></poi-component>
      </div>
      <button class="button is-primary" @click="add()">+</button>
  </div>
  `
});

More on this: https://v2.vuejs.org/v2/guide/components-props.html

Modification

If you make your prop required, you'll see the error/warning message if the passed prop's name is not correct (the example below is OK, so no error should be displayed):

poi-component.vue

var poiComponent = Vue.component('poi-component', {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data: {},
  methods: {},
  template: `
    <div :poi_index="id">
      <p>Hi n {{id}}</p>
    </div>`
});