Reloading x-for throws " Cannot read property 'remove' of undefined"

[yabdab]

Reloading a x-for template results in " Cannot read property 'remove' of undefined" error.

See example here: https://jsfiddle.net/yabdab/esvjwLtg/19/

Click first time works fine, click second time to reload and it fails.

[atompulse]

+1 for this issue

[danddanddand]

I think the error is just that you're x-modeling to var that doesn't exist. I turned on the experimental debug mode (#1607) and it shows elements with error so you can see it better.

https://jsfiddle.net/jh5nax9u/

[danddanddand]

Okay thanks, the other exception was getting in my way of seeing the real one. You're right that looks like bug for sure

[danddanddand]

I did some more digging and if you change your :key to be something more meaningful this will work as you expect it. For example, https://codepen.io/danddanddand/pen/Rwpzdby is boiled down version of your code with index used as key (update, don't do this, use string/number)

[danddanddand]

I don't fully understand the exception alpine is throwing, but it's for sure getting messed up in it's lookups I think because the key isn't unique. Still might be way for alpine to test for this better or error out better

[danddanddand]

Here is your example with the more meaningful index... The :key must be getting toString() of object or something weird. using option.value probably would work is recommended method (not index as in this sample). https://jsfiddle.net/rsv9uo5n/

[KevinBatdorf]

Keys need to be primitive types like numbers or strings. Same goes for other libraries too like React, etc.

You should also "never" use the index either. Index will work if you're not rearranging, the items but both Alpine and React will add for you as a backup it if you don't include it.

Adding it is an anti pattern as it adds no value and promotes bad habits (consider new users copy/pasting code, etc). Just a tip, not trying to sound negative

[calebporzio]

The issue is that you are using an entire object as the :key for the x-for.

Try: <template x-for="option in options" :key="option.value" hidden> (notice the added .value)

I will investigate and see if there is a fix for this case or a better error to throw - however, x-for keys should be something stringable, not objects.

If you think a piece of documentation would have warned you against this, please PR a note in the docs - thanks!

[calebporzio]

Ok, I added a warning for the case when the :key isn't stringable: #1639

It will be available in the next release and hopefully prevent others from tripping up on this. Thanks!

[yabdab]

Thanks Caleb. My code worked fine in v2 is why I never noticed it.
Your explanation of what the key should be makes total sense.

Thanks again for all your hard work on Alpine. 🤘