VueJS reactivity issue for object inside array

Question

I've declared my data object as queuedItemList: [] which is supposed to contain an array of items provided by a background service. After the HTTP request, I populate the list using a for loop like

for(var i = 0; i < getList.length; i++) {
    var newObject = Object.assign({}, getList[i]);
    this.queuedItemList.splice(i, 1, newObject);
}

which is used to populate the following template

<Item v-for="(item, index) in queuedItemList" :key="index" :componentData="item" :index="index" @remove="removeItem">
</Item>

I am supposed to do a periodic HTTP GET to get the new list of items, which may also contain current items with maybe different state. Inside the component, I am using a v-if to select between two different icons.

<v-icon name="play" class="controlIcons" v-if ="playControl" />
<v-icon name="pause" class="controlIcons" v-if ="!playControl" />

Now, after some HTTP requests, I see the value of playControl change in Vue Devtools which confirms that the actual value is reflected in the component. However, I can't see the icons change due to the change in the value of playControl. Furthermore, everything works as expected if I refresh the screen.

My guess is that I'm messing up the reactivity somewhere. Thanks!

tony19 · Accepted Answer · 2022-07-15 01:02:49Z

7

You're looking for https://v2.vuejs.org/v2/guide/reactivity.html

for(var i = 0; i < getList.length; i++) {
    var newObject = Object.assign({}, getList[i]);
    this.$set(this.queuedItemList, i, newObject);
}

Another method might be to update the parent's item list :key - thus, rerendering it - everytime you add an item:

</div :key="computedKey">    
    <Item v-for="(item, index) in queuedItemList" :key="index" :componentData="item" :index="index" @remove="removeItem"></Item>
</div>

With

computed: {
    computedKey () {
        return this.queuedItemList.length
    }
}

edited Jul 15, 2022 at 1:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 27, 2019 at 14:35

alx.lzt

4864 silver badges13 bronze badges

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

4 Comments

Grimson Over a year ago

Will the key method work even if the length of the array doesn't change?

Grimson Over a year ago

For some reason that doesn't work for me. Do I need to add a watcher somewhere?

alx.lzt Over a year ago

The length needs to change, but this.$set should have done the trick :o

Grimson Over a year ago

It did the trick, its just that my watcher on the other end was kind of broken. Thanks!

Grimson · Accepted Answer · 2019-06-27 15:09:13Z

0

Turns out what I needed was a combination of setters and watchers. I used @alx.lzt's setters and a watcher on the component level and that solved everything

answered Jun 27, 2019 at 15:09

Grimson

5721 gold badge8 silver badges25 bronze badges

Comments

Fraction · Accepted Answer · 2019-06-28 09:33:46Z

0

You can use several properties for reactivity check, $set to change the property in an object, $nextTick to assign the value.

If the both don't work you may try $forceUpdate()

edited Jun 28, 2019 at 9:33

Fraction

13.1k5 gold badges32 silver badges53 bronze badges

answered Jun 28, 2019 at 6:53

yashwanth kumar

653 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 02:37:46Z

0

i don't know the structure of "playcontrol"

<v-icon name="play" class="controlIcons" v-if ="playControl" />

I passed by something similar in past, when you update "playControl" value, you do just "playControl = newValue"? If you do, this can screw up the reactivity, try use Vue $set directive, like:

Vue.set(this.playControl, <value>);

https://v2.vuejs.org/v2/guide/migration.html#vm-set-changed

edited Jul 15, 2022 at 2:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 27, 2019 at 14:36

Julliano Osorio

3051 silver badge4 bronze badges

3 Comments

Grimson Over a year ago

But playControl is just a boolean variable which is assigned like this.playControl = ['NotStarted', 'Stopped', 'Paused'].includes(this.componentData.State); during the creation. I'm not sure if that will work but I'll still give it a try.

Grimson Over a year ago

I tried that, and I get "TypeError: right-hand side of 'in' should be an object, got boolean"

Julliano Osorio Over a year ago

hmmmm, okey, once i need to force a component to refresh the code, Vue offers, "this.$forceUpdate()" try it after get the new list of items; br.vuejs.org/v2/api/index.html#vm-forceUpdate

Collectives™ on Stack Overflow

VueJS reactivity issue for object inside array

4 Answers 4

4 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related