Passing data from parent to child via props in v-for in VueJS 2

Question

I went through similar questions but I couldn't find the answer and none of them worked for me.

Vuejs v-for Passing data Parent to Child

Vue - Passing parent data with same key name in v-for to child component

vue js how to pass data from parent, v-for loop list to child component with method

Pass data object from parent to child component

Vue.js - Pass in Multiple Props to Child in V-For

VUE / VUEX: How To Pass Data From Parent Template To Child Template

Parent.vue

            <div class="col-sm-2" v-for="(item,index) in itemsData" :key="index">
              <ItemWidget :item="item" />
            </div>

<script>
import { mapState, mapActions } from "vuex";

import ItemWidget from "@/components/item/ItemWidget";

export default {
  components: { ItemWidget },
  computed: {
    ...mapState("item", ["itemsData"])
  },
  created() {
    this.getItemList();
  },

  methods: {
    ...mapActions("item", ["getItemListX"]),
    getItemList() {
      this.getItemListX();
    }
  }
};
</script>

ItemWidget.vue

<template>
    <div class="label">
      <div class="label-value">{{ item.code }}</div>
    </div>
</template>

<script>
export default {
  props: ["item"]
};
</script>

itemsData is taken from the vuex by using MapState to the parent and itemsData is populated using created() method in the parent via an axios call in the vuex.

Error 1.

[Vue warn]: Error in render: "TypeError: _vm.item is undefined"

Error 2.

TypeError: "_vm.item is undefined"

How can I fix this?

Update

  itemsData: [
    {
      code: "Test",
    }
  ]

This could be easier to debug if you could provide an example repo. — Husam Ibrahim

Ezequiel Fernandez Ezequiel Fernandez · Accepted Answer · 2019-08-09T07:14:09

You should populate itemsData in computed method using ...mapState

Parent.vue

export default {
  data: function () {
    return {
      items: this.itemsData
    }
  },
  computed:{
    ...mapState('module/namespace', ['itemsData'])
  }

}

<div class="col-sm-2" v-for="(item,index) in items" :key="index">
    <ItemWidget :item="item" />
</div>

There is another way to declare your props:

<template>
    <div class="label">
      <div class="label-value">{{ item.code }}</div>
    </div>
</template>

<script>
export default {
  props: {
    type: Object,
    default: null
  }
};
</script>

Passing data from parent to child via props in v-for in VueJS 2

1 Answers