Is it OK to use Alpine.$data to access x-data of an element from another JS function

[davidcotter]

I have a <div> which appears if isOn is true thus:

<div id="frame" x-data="{ isOn: false, myData=[]}">
        <div :class="{'opacity-100': isOn, 'opacity-0': !isOn }">
            Hi there 
        </div>
</div> 

I have a JS callback from another library (plotly) that I want to use to control the appearance of the div and pass other data to the div x-data:

<script>
            var plot = document.getElementById('pca');
            plot.on('plotly_click', function (plotly_data) {
               var x_data = Alpine.$data(document.getElementById('frame'));
                x_data.myData=[plotly_data[0],plotly_data[1],plotly_data[2]];
                x_data.isOn=true;
            });
</script>

This works perfectly but I couldn't find any discussion or documentation for Alpine.$data - is this likely to break in the future or is this a stable feature? Is there a better way to do what I want - e.g. with store which was a bit more verbose?

Thank you.

[ekwoka]

Well, don't use var ever. or Element.on

But it would likely be smarter to hook this up inside the data context to begin with
like in x-init for example

[Neutrino-Sunset]

How would you do that? I'm able to get it to work by installing an update function in global scope, e.g.

            init() {
               window.updateComponentData = newData => {
                  this.data = { ...this.data, ...newData };
               }
            },

But this feels clunky. Is there a more elegant way to do this?

[ekwoka]

is the element not inside the component?

just do

<div id="pca" @plotly_click="Object.assign(data, $event.detail)">

[Neutrino-Sunset]

I see now how your suggestion handles the OP's case, my case is somewhat different.

I'm curious how best one can update the state of one component from outside of that component.

[ekwoka]

Dispatch an event would be the normal way. Or using a Store.

but it may more likely point to a structural issue. It's a bit of a code smell.