Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'completed') in Vue 3

Question

我正在尝试使用 Laravel 和 Vue.js 创建待办事项列表应用程序。我对那个标题错误有疑问。我看过这个视频 (https://www.youtube.com/watch?v=UHSipe7pSac&t=2482s) 来练习而且，我一直这样做到 47:50，但是当我写代码时 listItem.vue，它没有像视频中显示的那样工作。
虽然我和我的代码对比了很多次，但我也看不出哪里错了。如果你有解决办法，请告诉我如何解决。
而且，使用 laravel 和 Vue.js 调试应用程序的最佳方法是什么？这是我的版本
php
7.3.11
视图
vue@3.2.31

listItem.vue

<template>
  <div class="item">
    <input type="checkbox" @change="updateCheck()" v-model="item.completed" />
    <span>{{ item.name }}</span>
    <button @click="removeItem()" class="trashcan">
      <font-awesome-icon icon="trash" />
    </button>
  </div>
</template>
<script>
export default {
  props: ["item"],
};
</script>

<style scoped>
.completed {
  text-decoration: line-through;
  color: #999999;
}
.itemTexgt {
  width: 100%;
  margin-left: 20px;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.trashcan {
  background: #e6e6e6;
  border: none;
  color: #ff0000;
  outline: none;
}
</style>

app.vue

<template>
  <div class="todoListContainer">
    <div class="heading">
      <h2 id="title">TodoList</h2>
      <add-item-form />
    </div>
    <list-view :items="items" />
  </div>
</template>
<script>
import addItemForm from "./addItemForm.vue";
import listView from "./listView.vue";
export default {
  components: {
    addItemForm,
    listView,
  },
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    getList() {
      axios
        .get("api/items")
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.todoListContainer {
  width: 350px;
  margin: auto;
}

.heading {
  background: #e6e6e6;
  padding: 10px;
}

#title {
  text-align: center;
}
</style>

error.log

app.js:34649 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'completed')
    at Proxy.render (app.js:34649:69)
    at renderComponentRoot (app.js:22841:44)
    at ReactiveEffect.componentUpdateFn [as fn] (app.js:26958:57)
    at ReactiveEffect.run (app.js:20778:25)
    at setupRenderEffect (app.js:27084:9)
    at mountComponent (app.js:26867:9)
    at processComponent (app.js:26825:17)
    at patch (app.js:26426:21)
    at mountChildren (app.js:26613:13)
    at mountElement (app.js:26522:17)

后记
listView.vue

<template>
  <div>
    <div v-for="(item, index) in items" :key="index"></div>
    <list-item :item="item" class="item" />
  </div>
</template>
<script>
import listItem from "./listItem.vue";
export default {
  props: ["items"],
  components: {
    listItem,
  },
};
</script>

<style scoped>
.item {
  background: #e6e6e6;
  padding: 5px;
  margin-top: 5px;
}
</style>

我了解并理解了listItem.vue的parent是listView.vue。

Answer 1

我犯了多么愚蠢的错误！

<template>
  <div>
    <div v-for="(item, index) in items" :key="index"></div>
    <list-item :item="item" class="item" />
  </div>
</template>

↓

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

抱歉打扰您了。

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'completed') in Vue 3

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'completed') in Vue 3

vue.js

axios

vuejs3