Vue cannot detect changes for the array in the below two cases,
- When you directly set an item with the index,For example,
vm.todos[indexOfTodo] = newTodo
- When you modify the length of the array, For example,
vm.todos.length = todosLength
You can overcome both the caveats using set
and splice
methods, Let's see the solutions with an examples,
First use case solution
// Vue.set
Vue.set(vm.todos, indexOfTodo, newTodoValue)
(or)
// Array.prototype.splice
vm.todos.splice(indexOfTodo, 1, newTodoValue)
Second use case solution
vm.todos.splice(todosLength)