multiple refs in a for loop

[jimmywarting]

when i use x-ref in a for loop then it have no concept of a scope... so when i click on this toggle button, then it will always toggle the last ref element

<template x-for="i in 10">
    <div>
      <details x-ref="detail">
        <summary x-text="i"></summary>
      </details>
      <button x-on:click="$refs.detail.open = !$refs.detail.open" x-text="`open ${i}`" />
    </div>
  </template>

demo: https://jsfiddle.net/fsgtehcb/1/

how can i solve this problem?

[SimoTod]

I wouldn't use x-ref.
X-ref usually means that you are trying to apply imperative code to Alpine which tends to be declarative (you don't change objects, you change a state and let all objects react to it). You can use something like

<template x-for="i in 10">
    <div x-data="{open: false}">
      <details x-effect="$el.open = open">
        <summary x-text="i"></summary>
      </details>
      <button x-on:click="open = !open" x-text="`open ${i}`"></button>
    </div>
</template>

[jimmywarting]

Hmm, thanks... just had to add x-on:toggle="open = $el.open" also...

  <template x-for="i in 10">
    <div x-data="{open: false}">
      <details x-on:toggle="open = $el.open" x-effect="$el.open = open">
        <summary x-text="i"></summary>
      </details>
      <button x-on:click="open = !open" x-text="`open ${i}`"></button>
    </div>
  </template>

don't know how i feel about this solution... some of this code ☝️ will not be needed. it was only mostly for education purpose and learning how i can use the x-if. still doe i do not think it did not answer my original issue in that refs is not scoped to something.

figured out i could use a empty x-data={} to solve the problem also

<div x-data="{}">
  <template x-for="i in 10">
    <div x-data="{}">
      <details x-ref="detail">
        <summary x-text="i"></summary>
      </details>
      <button x-on:click="$refs.detail.open = !$refs.detail.open" x-text="`open ${i}`" />
    </div>
  </template>
</div>