Open szmarci opened 7 years ago
+1 Just hit this today.
splice
from one, add to the otherindex
is off when trying to move items back to first list@szmarci Did you find a solution to this?
Was this fixed? Just bumped into this problem while rendering components in a for loop too. Long story short: Array.prototype.splice
is visually acting like Array.prototype.pop
, always removing the last item of my for loop, although removing the correct index at my $data
variable.
I'm trying do make a repeatable filter using components, but It's not working as expected only when the user tries to remove it.
@hotmeteor no, sorry I didn't find a solution :(
+1 getting this today :(
I had the same issue as well, what happened was I didn't use unique key
values for each vue item. I used the index in the array as the key. So when items were resorted, some of the data would be binded to different items because keys were swapped.
What I used was a Date.now()
function to initialize a UUID to set for each key
....
So for instance, say we had the key set to the index of the array
[ 0, 1, 2, 3, 4] - The keys
[A0,B0,C0,D0,E0] - The array of objects
[A1,B1,C1,D1,E1] - The data attribute inside each of the objects in array
So [A0] has a key of [0], and data attribute of [A1]. Say we swap [A0] and [B0]
[ 0, 1, 2, 3, 4] - the key
[B0,A0,C0,D0,E0] - the array of objects
[A1,B1,C1,D1,E1] - the data attribute assigned to each object in array
Now [A0] is binded to the data attribute of [B1], because [B1] is binded to the key of [1] and A[0] key is [1]
This is never what you want, so you want to make each key unique instead. A common way of doing this is using a Date.now()
method upon data initialization, or a create a UUID
Example in Vue for creating a unique UUID for each object when using vue methods
methods: {
_addGroup: function() {
let result = {
sortId: this.wizardGroups.length + 1,
text: 'Hello world'
uuid: Date.now(),
};
this.wizardGroups.push(result);
}
Assign that value to the key during v-for
iteration
<child-component
v-for="wizardGroup in wizardGroups"
:key="wizardGroup.uuid">
</child-component>
I can't post a jsfiddle, because the devtools extension doesn't work in it, so I made a github repo of the issue (@LinusBorg pointed me here): https://github.com/szmarci/vuedevtoolbug
So if you clone the repo, open up the vue devtool chrome extension, and hover over the board components you see this:
It works fine, components are linked to the correct element in the array. But after your reorder it, this happens:
In the extension components are no longer points to the correct element, although
{{ $data }}
logged out reflecting the changes as well. So does the view.