v-for on <intersect /> renders duplicate item to end of list if we unshift a new item.

[Atokulus]

Hi there

Thank you for this small, but useful Vue.js plugin.

I have a rather peculiar problem, which I worked around eventually. Yet for the sake of documentation and helping others, it would be useful to note down this issue.

Let's say I have an array items, of which I want to render each item in an <intersect> component. Such as:

<intersect v-for="item in items" :key="item.id" @enter="someCallback">
    <p>{{ item.name }}</p>
</intersect>

Now assume I do unshift a new item with an unique id:

this.items.unshift({
    id: 'randomId',
    name: 'foobar'
})

The new item won't be rendered at first position. Rather Vue.js will duplicate the last item and render it at the end of the list!

From checking vue-intersect's source code I do not see, why this happens.

As a workaround I encapsulated the <intersect> component:

<div v-for="item in items" :key="item.id">
    <intersect @enter="someCallback">
        <p>{{ item.name }}</p>
    </intersect>
</div>

Maybe it has to do with how Vue.js handles abstract components, v-for, and :key together. Do you have an idea? Might this be an issue for Vue.js itself?

Best regards
Markus Wegmann
Technokrat LLC

[tkjaergaard]

Hi @Atokulus, i need to run a few test to replicate. Might be because of abstract or Vue itself.