组件中的Vuejs3React式阵列

fumotvh3 于 2023-03-31 发布在 Vue.js

关注(0)|答案(3)|浏览(151)

我尝试在元件中使用电抗阵列。
它只对一个对象起作用，而对一个对象数组不起作用。
如何在数组更新时更新视图？

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>'
};
....

vue.js

来源：https://stackoverflow.com/questions/64416605/vuejs3-reactive-array-in-a-component

3条答案

按热度按时间

dnph8jn41#

根据官方文件：

一月一日：

获取一个对象并返回原始对象的响应式代理。这相当于2.x的Vue.observable()
....
React性转化是“深”的：它会影响所有嵌套的属性。在ES2015基于Proxy的实现中，返回的代理不等于原始对象。建议只使用响应式代理，避免依赖原始对象。
我建议像处理test一样，将数组分配给reactive参数中的字段value：

resources: Vue.reactive({value:[]}),

然后使用resources.value=someVal更新该值。

赞(0）回复(0）举报 2023-03-31

wkyowqbh2#

两件事：

resources: Vue.reactive({value:[]})可以通过使整个存储器React来避免
data()是一个本地副本，但你真的需要一个真实的单一来源（即商店），所以通过计算属性访问它（基本上是Vuex的工作方式）。

var self = currentClassInstance // this

self.store = Vue.reactive({
  resources: [],
  setResources(resources) {
    this.resources = resources
  }, 
})

const app_draw = {

  computed: {
    resources() {
      return self.store.resources
    }
  }
       
  template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'
};

赞(0）回复(0）举报 2023-03-31

pepwfjgg3#

快捷的方法

const resources = reactive([]);

// set resources
resources.length = 0;
resources.push(...items)

赞(0）回复(0）举报 2023-03-31

我来回答

组件中的Vuejs3React式阵列

3条答案

相关问题

热门标签

最新问答