How can I access a model property from a nested x-spread object?

[james0r]

I'm able to change a top level model property by targeting the element in the DOM, but I'm assuming there's a cleaner less coupled way of doing this.

Here was my dirty solution:

<div id="component" x-data="model()">
  <button id="alert-me" x-spread="obj.embeddedSpread">Change Text</button>
  <h1 x-text="test"></h1>
</div>

function model() {
  return {
    test: "original",
    obj: {
      embeddedSpread: {
        ["@click"]() {
          document.getElementById("component").__x.$data.test = "changed";
        }
      }
    }
  };
}

https://codepen.io/James0r/pen/wvoLyWO

[HugoDF]

Does this.test = "changed" not work?

[james0r]

It does! I swear I tried this. Anyway appreciate it.