Vue-devtools: Moving items in array, doesn’t retain array indexing in devtool components

[szmarci]

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.

[hotmeteor]

+1 Just hit this today.

• two lists
• splice from one, add to the other
• displaying lists as sorted by name
• index is off when trying to move items back to first list

@szmarci Did you find a solution to this?

[juniorgarcia]

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.

[szmarci]

@hotmeteor no, sorry I didn't find a solution :(

[marcosteixeira]

+1 getting this today :(

[vincentntang]

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

---

In Summary

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>