Laravel集成Vue开发TodoList出现Cannot read properties of undefined报错

错误根源出在listView.vue文件的模板逻辑中：
你在v-for循环内部重复渲染了两次list-item组件，第一次为正常传入item属性的版本，第二个是无任何属性传入的空<list-item />标签。空组件实例接收不到item prop，默认值为undefined，当组件内部尝试访问item.completed属性时就触发了本次类型错误。

修复方案 #

删除listView.vue中v-for循环内多余的空list-item标签即可，修正后的代码如下：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <list-item
        :item="item"
        class="item"
        v-on:itemchanged="$emit('reloadlist')"
      />
    </div>
  </div>
</template>

<script>
import listItem from "./listItem";

export default {
  props: ["items"],

  components: {
    listItem,
  },
};
</script>

额外优化建议 #

• 给listItem的item prop添加必填校验或者默认兜底值，后续出现同类传参问题时可以拿到更明确的报错提示：

  // listItem.vue 的props配置
  props: {
    item: {
      type: Object,
      required: true,
      // 兜底默认值可选
      default: () => ({
        id: null,
        name: '',
        completed: false
      })
    }
  }
  

• 列表渲染的key属性不要使用数组下标index，替换为每个todo项的唯一标识item.id，避免列表增删时出现状态错乱问题。

内容的提问来源于stack exchange，提问作者Nikerstriker