[Vuejs]-VueJs – avoid useless v-for iteration

by

0👍

Whole list will be re-rendered because Vue have no clue how to detect which object was removed, because there is no meta-information for the post identity.

You need to specify “key” attribute, which explicitly defines id<->data binding. 

<div v-for="post in posts" :key="post.id">
  <p> {{post.content}} </p>
</div>

0👍

Vue does not understand what was the change in your list, so it renders the component again. You need to add an identifier in your loop.

<div v-for="item in items" v-bind:key="item.id">
  <!-- content -->
</div>

The key attribute is used to maintain the state. For more details about the key attribute, read here

Leave a comment