Incorrect removal of array element from nested x-data using indexes

[reefki]

Watched @calebporzio accordion screencast and try to implement the same concept on my project. But there is one difference, in the screencast each item has an ID while in my case each item is just a plain text without ID.

I tried to add "Delete" item functionality which basically remove the item using its index like so:

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="(color, index) in colors">
        <li x-data="{}">
            <p x-text="color"></p>
            <button x-on:click="colors.splice(index, 1)">Delete</button>
        </li>
    </template>
</ul>

However, no matter which button I clicked it will remove the last item from array and ignoring the index.

Here is the pen: https://codepen.io/reefki/pen/LYjJbpN

EDIT

I know I can just remove the x-data attribute from the item loop and it will work just fine, but in my case (which more complex than the above example) the x-data is really needed.

[reefki]

I tried using items with IDs and still give the same behavior: https://codepen.io/reefki/pen/MWvqbEN

[reefki]

You're right, I've updated the pen and it works, still wondering why it doesn't work using array index.

[danddanddand]

https://alpinejs.dev/directives/for#keys

[reefki]

https://alpinejs.dev/directives/for#accessing-indexes I can use indexes according to the doc

[SimoTod]

@reefki Keying by plain array index in your html is rarely a good idea, when you change the array the same item gets a different index so for example, if you remove an element, Alpine will always remove the one at the end and patch the others.
This is a problem if you have element with their own state like input tags: https://codepen.io/SimoTod/pen/RwZYpKP

[reefki]

@SimoTod that's make a sense, I thought it was a bug.