当发生on-change事件时，调用函数时出现错误。

Question

我试图建立一个todo应用程序，在其中我试图调用一个函数markComplete的每一个复选框被选中或未选中。不能读取undefined的'completed'属性。

有什么解决办法？

<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

请看这张图的控制台截图

错像

虽然它在这种情况下工作

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

Answer 1

什么；是一个目的的 道具：['嘟嘟'] ['todo']? 这个名字在模板中与 v-for="todo in todos". 如果你只是想改变 竣工 榰 所有 列表，那么只需这样做。

<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
    }
  }

Answer 2

有一个 撞名或 更改属性的todo名称 喜欢

props: ['todoProp']

或改变v-for中的todo，如

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