我创建了一个简单的待办事项应用程序,当从vuex商店中删除项目时,呈现待办事项列表的组件会自动更新。将待办事项从“待处理”更新为“已完成”时,组件不会自动更新。商店已更新,但我认为没有触发器会显示
嘿,数组中的资源已更新,请重新渲染
我如何强迫它这样做?
我创建了一个小例子来说明我的意思,如果删除待办事项,组件将更新。如果您单击“更新”按钮,则不会更改。
答案 0 :(得分:2)
这是一个反应性问题:
Vue不允许动态添加新的根级别反应式 已创建实例的属性。但是,有可能 使用Vue.set(object,将反应性属性添加到嵌套对象 键,值)方法(source)
在商店的UPDATE_TODO
突变中,更改以下行:
state.todos[todoIndex] = updatedTodo
对此:
Vue.set(state.todos, todoIndex, updatedTodo)
,当然,请在文件顶部添加import Vue from 'vue'
。
它应该以这种方式工作。