Update v-for in Vue.js

Asked

Viewed 472 times

0

Hey guys, I’m having a slight problem here on my Vue.js. I have a variable user.activeItems, in HTML I give a v-for on 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>

Until then it is all quiet, when the user has no active item, he simply does not do v-for. However, elsewhere in my App, there is a Component that activates an item when clicked, it adds the active item as follows:

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

When I print the user.activeItems already with one item atívo, when adding another, everything works very well, however if I print the empty variable and then add an item, nothing happens, the item is added in the user.activeItems but does not appear in v-for.

If anyone can help me, I’d be grateful.

javascript vue.js vue.js-2

  • inserts the v-for items using a computed properties as they emit modifications to v-for whenever a change occurs in the items

1 answer

0

I believe the application should be breaking due to not being able to render an empty item.

You can try checking items on your list by 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>

Browser other questions tagged javascript vue.js vue.js-2

You are not signed in. Login or sign up in order to post.