x-data gets overwritten when surrounded by x-data (nested)

[mitosch]

Hi Everyone

I don't know, if it is a bug in Alpine or if I missed something in the documentation. As soon as individual x-data elements are surrounded by another x-data element, they behave different.

Below is a simple example:

• On init() the button is selected
• A getter function selectButtonLabel returns the data-label attribute of the button

Current behavior

As soon as the individual buttons are surrounded with another <div x-data></div> element, the buttons get the label from the last button (Dropdown 3).

Expected behavior

Both examples should behave the same and every button should get it's own data label.

Example:

<h3>Individual Buttons (works as expected)</h3>

<div x-data="dropdownTest">
  <button @click="toggle" data-label="Dropdown 1" x-text="selectButtonLabel" class="select" type="button">Dropdown</button>
</div>
<div x-data="dropdownTest">
  <button @click="toggle" data-label="Dropdown 2" x-text="selectButtonLabel" class="select" type="button">Dropdown</button>
</div>
<div x-data="dropdownTest">
  <button @click="toggle" data-label="Dropdown 3" x-text="selectButtonLabel" class="select" type="button">Dropdown</button>
</div>

<h3>Surrounded by x-data (behaves different)</h3>

Here, all buttons will get named with "Dropdown 3":

<div x-data>
  <div x-data="dropdownTest">
    <button @click="toggle" data-label="Dropdown 1" x-text="selectButtonLabel" class="select" type="button">Dropdown</button>
  </div>
  <div x-data="dropdownTest">
    <button @click="toggle" data-label="Dropdown 2" x-text="selectButtonLabel" class="select" type="button">Dropdown</button>
  </div>
  <div x-data="dropdownTest">
    <button @click="toggle" data-label="Dropdown 3" x-text="selectButtonLabel" class="select" type="button">Dropdown</button>
  </div>
</div>

JavaScript:

class DropdownTest {
  init() {
    this.open = false;
    this.dropdownButton = this.$el.querySelector("button.select")
  }

  get selectButtonLabel() {
    return this.dropdownButton.dataset.label;
  }
}

document.addEventListener("alpine:init", () => {
  Alpine.data("dropdownTest", () => new DropdownTest());
});

Full working example to see the effect:
https://codepen.io/mitosch/pen/zxqbVqO

Thank you for your assistance and ideas. I already tested to name the "x-data" attributes different (dropdownTest1, dropdownTest2, etc.), but this has the same effect. In my opinion this should not happen, because every element has it's own instance of the DropdownTest class.

[ramonakira]

I can not tell you if this a bug in AlpineJS or not but I do have a few ways you can work around it. In general I think if you are tempted to use querySelector, it is probably a sign that you are working in the wrong direction.

One solution is to remove the querySelector line and change the getter to this:

  get selectButtonLabel() {
    return this.$el.dataset.label;
  }

Somehow $el will be the button, so everything works out. Codepen here: https://codepen.io/ramonakira/pen/myErrZL?editors=1011

Another solution is to add an x-ref to the button, and change the getter to (assuming x-ref="buttonSelect"):

  get selectButtonLabel() {
    return this.$refs.buttonSelect.dataset.label;
  }

Codepen: https://codepen.io/ramonakira/pen/EayggBg?editors=1010