Vue: splice is not working as expected and ALWAYS removes last item in array no matter which index is given

[kgrosvenor]

This is my parent vue component which is repeats this child component

<v-feed-item v-for="(post, index) in posts" :post="post" :user="user" v-on:item-deleted="posts.splice(index, 1)"></v-feed-item>

in the feed item template component i'm using $emit function to access the v-on:item-deleted

posts.splice is causing the last item in the array to be removed, i've also tried calling a function similar to below example but exactly the same result, i can even console log and get the desired index that i would like to be removed. Is this a genuine bug? My template code in child item is pretty complex but i even tried making it absolutely minimal but still same result...

onDelete: function (item, index) { var self = this; let idx = self.posts.indexOf(item); self.posts.splice(idx, 1); }

[kgrosvenor]

If this is not an issue can somebody please outline what is a common cause of this problem?

[LinusBorg]

Hello @kgrosvenor

Thank your for your interest in this project.

However, your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there.

[yyx990803]

Key the components.

[kgrosvenor]

Hi mate can you tell me what "key the components" means? is this a JavaScript code behind issue or something more to do with my view code? Thank you for swift response, i appreciate it and i really think this framework is worth 5 stars but i've hit a little bit of a wall block on this :P

so do you mean

:key="item.id"

can i do

:key="index"

i just want to remove element by it's index, what is key actually for, is it simular to angular 1's track by $index?

[fnlctrl]

@kgrosvenor Check this out: http://vuejs.org/v2/guide/list.html#key

[kgrosvenor]

Thank you @fnlctrl, and @yyx990803 i will check this out when im next near my codebase :)

[kgrosvenor]

Would like to confirm that :key worked, thank you for the help guys :) this framework is awesome, may have to get a sticker for my laptop aha!

[john-cheesman]

I've had trouble using :key="index" in a v-for, which makes sense as the index is dependent on the number of items in the array and is changed by splicing from the middle. The key property should be bound to an id from the item that isn't going to change e.g. :key="item.id".

The todo example in the docs uses index as the key, which is probably fine as there is no two-way binding. Can this be changed to prevent further confusion or should I raise a new issue?

[LinusBorg]

The todo example in the docs uses index as the key, which is probably fine as there is no two-way binding. Can this be changed to prevent further confusion or should I raise a new issue?

The other examples already use item.id, so tha change would make sense. Would you be willing to submit a PR? :)

Source is here: https://github.com/vuejs/vuejs.org/blob/master/src/v2/guide/list.md

[kgrosvenor]

Yes i've bound to a identifier in my data structure and it was fine, what does the markup look like? it works for me one way and two way :)

[john-cheesman]

@kgrosvenor I was having the same issue as you because I was using the index as the key, I'm now using an id property and it works fine.

Just to make sure I tested the example from the docs and modified it to illustrate the problem. At first I just replaced the text output with an input bound directly to the title property, which still worked when removing items from the list. The problem comes from binding to a data property, which doesn't get properly updated when the list is spliced.

[john-cheesman]

@LinusBorg I'm happy to make the changes to the docs but it will require adding some complexity to the example.