Question

我遇到了类似的问题，但是我找不到答案，没有一个对我有用。

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>

通过使用MapState将

itemsData从vuex中获取到父对象，并通过vuex中的axios调用在父对象中使用created（）方法填充itemsData。

错误1。

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

错误2。

TypeError: "_vm.item is undefined"

我该如何解决？

更新

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

Answer 1

您应该使用... mapState在计算方法中填充itemsData

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>

还有另一种声明道具的方法：

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

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

在VueJS 2中通过v-for中的道具将数据从父母传递给孩子

1 个答案: