I'm trying to create Todo List App with Laravel and Vue.js. I have problem with that title error. I've watched this video (https://www.youtube.com/watch?v=UHSipe7pSac&t=2482s) for paractcing And also, I've done until 47:50, but when I wrote a a code listItem.vue, It didn't work as shown in video.
Although I compared with mycode for many times, I couldn't where is wrong. If you have solution, Please tell me how to fix.
And, What is best way how to debug apps with laravel and Vue.js? Here is my version
php
7.3.11
vue
[email protected]

listItem.vue

<template>
  <div >
    <input type="checkbox" @change="updateCheck()" v-model="item.completed" />
    <span>{{ item.name }}</span>
    <button @click="removeItem()" >
      <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 >
    <div >
      <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)

postscript
listView.vue

<template>
  <div>
    <div v-for="(item, index) in items" :key="index"></div>
    <list-item :item="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>

I learned and understood listItem.vue's parent is listView.vue.

CodePudding user response：

What a silly mistake I had made!

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

↓

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

sorry to take up your time.