触发 on-change 事件时调用函数时出错答案

【问题标题】：error while calling the function when on-change event is fired触发 on-change 事件时调用函数时出错
【发布时间】：2020-09-01 17:24:48
【问题描述】：

我正在尝试构建一个待办事项应用程序，并尝试在每个选中或未选中的复选框上调用函数 markComplete。它抛出错误说无法读取未定义的属性“已完成”。

它的解决方案是什么？？

<template>

  <div class="todos mt-4 mx-auto">
    <div class="todo-item" v-bind:class="{'is-complete':todo.completed}" v-for="todo in todos" :key="todo.id">

      <p>
        <input type="checkbox" v-on:change="markComplete">
        {{todo.title}} 
        <button class="float-right del">&times;</button>
      </p>

    </div>

  </div>

</template>

<script>
export default {
  props: ['todo'],

  data (){
    return {
      todos:[
        {
          id: 1,
          title: 'Learn Vue',
          completed: false
        },
        {
          id: 2,
          title: 'Creata a Todo App',
          completed: false
        },
        {
          id: 3,
          title: 'Create BM news UI',
          completed: false
        },
      ]
    }
  },
  methods: {
    markComplete: function(){
      this.todo.completed = !this.todo.completed
    }
  }
}

在运行应用程序并单击复选框后，它会显示一个错误提示...

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'completed' of undefined"

found in

---> <TodoItem> at src/components/TodoItem.vue
       <App> at src/App.vue
         <Root>

 TypeError: Cannot read property 'completed' of undefined

查看此图片以获取控制台屏幕截图

error image

虽然它适用于这种情况

<input type="checkbox" v-on:change="todo.completed = !todo.completed">

【问题讨论】：

你能提供一个包含这两个组件的示例演示吗？

标签： javascript html vue.js dom vuejs2

【解决方案1】：

存在名称冲突，或更改属性的待办事项名称类似

props: ['todoProp']

或更改 v-for like 中的待办事项

<div class="todo-item" v-bind:class="{'is-complete':currentTodo.completed}" v-for="currentTodo in todos" :key="currentTodo.id">

【讨论】：

抱歉，它没用；没用。它仍然记录相同的错误

【解决方案2】：

props: ['todo'] 的用途是什么？此名称在模板中与 v-for="todo in todos" 冲突。如果您只想更改 todos 列表中某项的 completed 属性，那么只需执行以下操作：

<input type="checkbox" v-model="todo.completed">

如果您希望在更改 todo.completed 时添加其他代码，那么您可以这样做：

<input type="checkbox" v-on:change="markComplete(todo)">
...
methods: {
    markComplete: function(todo){
      todo.completed = !todo.completed
      // do some work
    }
  }

【讨论】：