vue-intersect
vue-intersect copied to clipboard
`v-for` on `<intersect />` renders duplicate item to end of list if we unshift a new item.
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
Hi @Atokulus, i need to run a few test to replicate. Might be because of abstract or Vue itself.