[Vuejs]-Error while calling the function when on-change event is fired

by

0👍

✅

there is a collision of names, or change the todo name of the property like

props: ['todoProp']

or change the todo in the v-for like

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

0👍

What;s a purpose of props: [‘todo’]? This name conflicts in a template with v-for=”todo in todos”. If you just wish to change the completed prop of an item of a todos list then just do this:

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

If you wish to do additional code on change todo.completed then you can do this:

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

Leave a comment