Cannot loop through a javascript Set

[balthild]

For example, this doesn't work:

<div x-data="{ values: new Set([1, 2, 3, 2, 1]) }">
  <template x-for="value in values" x-bind:key="value">
    <span x-text="value"></span>
  </template>
  <div>
    <button @click="values.add(Math.round(Math.random() * 9))">add</button>
  </div>
</div>

I have to convert the set into an array to make it work:

<template x-for="value in [...values]"

[ekwoka]

Interesting!

Yeah, how it gets the values in that case is with Object.entries which of course yields nothing on a Set.

I think one aspect Alpine would need to consider for just coercing the set to an array like that is that a Set's Entries are basically value, value and looping over them yields both, not only one. Like a map does key, value as set does value, value so we might need to think about if a Set should just be more like an array and only do the value and index, or like an actual set...

🤔

[alfanzain]

Does converting a Set into key-value pairs already solve this problem?
If so, I've created a PR for this, so we can handle it if we put a Set on it.

Please check this #4672