Vue.JS, Staggered Transitions, and Loading More

Question

The VueJS Guide has a really neat approach for using the items index to create a delayed transition for the items within the dataset - here . This works super well if your data set isn't changing, but in my case I'm using a load more button to fetch the next set of records and add them to my array. Because the loading delay is based on index , the new items are not animating right away - they're waiting for the existing items to animate before they begin. Does anyone have ideas on a clean way to reset the timer between calls?

Thanks!

Answer 1

1. Pass correct key attribute. You are probably making AJAX request to the API server when user press Load More button. In most cases, every element in the response will have a unique ID of the item. Consider:

 [ { id: 15, title: 'Page #15' }, { id: 16, title: 'Page #16' }, { id: 17, title: 'Page #17' } ]

As you can see - unique property here is id . You should use it as :key in v-for .

 <span v-for="item in items" :key="item.id" class="list-item"> {{ item }} </span>

2. Correctly change the array . Use array.push() , array.splice() or replace the array. There is an official way to handle it: https://v2.vuejs.org/v2/guide/list.html#Array-Change-Detection

3. Make sure CSS animation is correct .

Please, provide some code next time you ask for help. Because it's really hard to find the issue without code.