我尝试在元件中使用电抗阵列。
它只对一个对象起作用,而对一个对象数组不起作用。
如何在数组更新时更新视图?
var self = currentClassInstance // this
self.store = {
resources: Vue.reactive([]),
test: Vue.reactive({ test: 'my super test' }),
setResources(resources) {
// this one doesn't update the view. ?
this.resources = resources
},
setResources(resources) {
// this one update the view
this.test.test = "test ok"
},
}
....
const app_draw = {
data() {
return {
resources: self.store.resources,
test: self.store.test,
}
},
updated() {
// triggered for "test" but not for "resources"
console.log('updated')
},
template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'
};
....
3条答案
按热度按时间dnph8jn41#
根据官方文件:
一月一日:
获取一个对象并返回原始对象的响应式代理。这相当于2.x的
Vue.observable()
....
React性转化是“深”的:它会影响所有嵌套的属性。在ES2015基于Proxy的实现中,返回的代理不等于原始对象。建议只使用响应式代理,避免依赖原始对象。
我建议像处理
test
一样,将数组分配给reactive参数中的字段value:然后使用
resources.value=someVal
更新该值。wkyowqbh2#
两件事:
resources: Vue.reactive({value:[]})
可以通过使整个存储器React来避免data()
是一个本地副本,但你真的需要一个真实的单一来源(即商店),所以通过计算属性访问它(基本上是Vuex的工作方式)。pepwfjgg3#
快捷的方法