Update v-for in Vue.js

Question

Update v-for in Vue.js

Navigation

#1 by (0 votes)

0

Hey guys, I have a slight problem here in my Vue.js. I have a variable user.activeItems , in HTML I give a v-for this variable, to show the active items, as follows:

<div class="item-container" v-for="(item, index) in user.activeItems" :key="index">
    <item-active :act-index="index" :name="item.name" :description="item.description"></item-active>
</div>

So far everything is quiet, when the user does not have any active items, he simply does not do the v-for. However, in another part of my App, you have a component that activates an item when it is clicked, it adds the active item in this way:

Vue.set( this.$root.user.activeItems, this.item_id, this.item );

When I print user.activeItems already with an item, when adding another, everything works fine, but if I print the empty variable and then add an item, nothing happens, the item is added in user.activeItems but it does not appear in v-for.

If anyone can help me, I would be grateful.

javascript vue.js vue.js-2 jsonobject

asked by anonymous 28.10.2018 / 20:00

1 answer

How to join two different file arrays in RData format? Regressive timer updates and does not accept new value to start counting

score 0 · Answer 1

I think the application should be cracking because it can not render an empty item.

You can try to check items in your list, using v-if , and render items only if they exist.

<div class="item-container" v-for="(item, index) in user.activeItems" 
:key="index">
   <item-active v-if="item" :act-index="index" :name="item.name" :description="item.description"></item-active>
</div>