Компонент обновления при обновлении ресурса
Я создал простое приложение todo, и при удалении элемента из моего хранилища vuex компонент, отображающий список задач, обновляется автоматически. При обновлении элемента списка дел с «ожидающего» на «завершенное» компонент не обновляется автоматически. Магазин обновляется, но я думаю, что нет триггера, который говорит
hey, a resource from an array got updated, please render again
Как я могу заставить его сделать это?
Я создал небольшой пример, показывающий, что я имею в виду, если вы удалите элемент списка дел, компонент обновится. Если вы нажмете на кнопку «обновить», это не изменится.
Ответы 1
Это проблема реактивности:
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method (source)
В мутации UPDATE_TODO вашего магазина измените эту строку:
state.todos[todoIndex] = updatedTodo
к этому:
Vue.set(state.todos, todoIndex, updatedTodo)
и, конечно же, добавьте import Vue from 'vue' вверху файла.
Это должно работать таким образом.