Using a reactive array in a component

Question

I'm trying to use a reactive array in a component. It works with an object but not with an array of objects.

How can I update the view when the array is updated?

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

I'll try with Proxies... this.resources = resources erase Vue.reactive, it can't works — Pad
– Pad, Commented Oct 18, 2020 at 18:35

Boussadjra Brahim · Accepted Answer · 2020-10-18 19:28:08Z

10

According to the official docs :

Reactive:
Takes an object and returns a reactive proxy of the original. This is equivalent to 2.x's Vue.observable()
....
The reactive conversion is "deep": it affects all nested properties. In the ES2015 Proxy based implementation, the returned proxy is not equal to the original object. It is recommended to work exclusively with the reactive proxy and avoid relying on the original object.

i suggest to assign the array to field called value inside the reactive parameter like you did with test :

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

then use resources.value=someVal to update that value.

edited Oct 18, 2020 at 19:28

answered Oct 18, 2020 at 18:38

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rovast · Accepted Answer · 2023-03-24 07:07:25Z

5

A quick way

const resources = reactive([]);

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

answered Mar 24, 2023 at 7:07

rovast

1612 silver badges6 bronze badges

Comments

SirDorius · Accepted Answer · 2023-07-07 11:21:58Z

3

Adding to the answers above, there are two main ways to handle reactive arrays

Single array with mutating values

const arr = reactive([])
arr.length = 0  // clear
arr.push(...items)

Changing array reference to immutable values

const arr = ref([]) // equivalent to reactive({value:[]})
arr.value = ["Shiver", "me", "timbers"]

Both will trigger reactive updates

answered Jul 7, 2023 at 11:21

SirDorius

4815 silver badges9 bronze badges

Comments

Ackroydd · Accepted Answer · 2020-10-18 20:51:43Z

2

Two things:

resources: Vue.reactive({value:[]}) can be avoided by making the whole store reactive
data() is a local copy, but you really want a single source of the truth (i.e the store), so access it via a computed property (basically the way Vuex works).

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

answered Oct 18, 2020 at 20:51

Ackroydd

1,4801 gold badge13 silver badges14 bronze badges

Collectives™ on Stack Overflow

Using a reactive array in a component

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related