[Question] - What is the best way to access x-data data from js

[hamrickdavid]

I have a dropdown that I would like to serialize and include in an ajax request, but I'm having a hard time getting the selected states of the dropdown. Is there a way to access the contents of x-data from outside the scope of the component?

For example, with vue I can access it using properties on the vue app object:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

console.log(app.message) // reads 'Hello Vue!'

[HugoDF]

You should be able to use this.yourPropertyName.

For example:

<div x-data="page()">
  <button @click="fetchData()">Fetch</button>
</div>  
<script>
  function page() {
    return {
      message: 'Hello world',
      fetchData() {
        console.log(this.message);
      } 
    }
  }
</script>

In order to do what you describe, you might need to build it as follows:

<div x-data="page()">
  <select x-model="selectedOption">
    <option value="">Select an option</option>
    <template x-for="option in options">
      <option
        :key="option.value"
        :value="option.value"
        x-text="option.text">
      </option>
    </template>
  </select>
  <button @click="fetchData()">Fetch</button>
</div>  
<script>
  function page() {
    return {
      message: 'Hello world',
      selectedOption: '',
      options: [
        {
          value: 'bacon',
          text: 'Bacon'
        },
        {
          value: 'ham',
          text: 'Ham'
        }
      ],
      fetchData() {
        console.log(this.selectedOption);
      } 
    }
  }
</script>

[calebporzio]

Thanks @HugoDF!

[HugoDF]

@calebporzio how would you feel if I contributed a "cookbook" to this repo? Documenting common questions like this one

[hamrickdavid]

Sorry - I may not have made my question clear. I know how to access the data from in-scope in the JS object (and your example does a good job showing that). I was curious how to access it from out of the scope of the x-data object?

[HugoDF]

@hamrickdavid I think you can access the relevant Alpine.js component instance using element.__x, Alpine.js components have a $data property see https://github.com/alpinejs/alpine/tree/master/src/component.js

So element.__x.$data should work off the top of my head/reading the code will get back to you with an example later if this doesn't work.

[hamrickdavid]

Thanks so my for your help @HugoDF. Solves my problem perfectly. It also works to change the values of data via JS and have the component react to changes.

@calebporzio is this an internal API that shouldn't be relied on? Or is that relatively stable?

[HugoDF]

@hamrickdavid I think it falls under "stable but use at your own risk" ie. It's not a documented feature, but I don't think it's likely to change

[jastrauss]

You could hoist a reference of your object into the global scope before passing it to Alpine

<div x-data="create_model()">...</div>

<script>
  function create_model() {
    window.model = {
      'username': 'some_data'
    }
   return model
  }
</script>

which you can access in the console at window.model or just model

[HugoDF]

@jastrauss I'm not sure that'll reference the value in Alpine state (which takes the initial state and wraps it in a Proxy in order to implement reactivity)

[jastrauss]

It works in version 2.4! You can read the data but not write to it.

[mikklaos]

@jastrauss This solution is the best. Hope it does not change soon

[HugoDF]

@jastrauss @mikklaos note that your global won't receive updates, so this works fine to store your initial data but won't work if you expect the data to change (when updated from Alpine directives)

[mikklaos]

@HugoDF But I do receive updates in the model when I use x-model in inputs the data changes in window.model as well. I am using 2.8 version

[HugoDF]

@HugoDF But I do receive updates in the model when I use x-model in inputs the data changes in window.model as well. I am using 2.8 version

Interesting, that doesn't sound like it should work, have you got a small demo you can share?

[SimoTod]

@mikklaos is correct. If you assign data to a variable on the window object, it will create a reference to the same object.
It allows you to read the alpine data and, technically, to write them too but the latter won't trigger the reactivity since it won't go through the apline proxies.

[mikklaos]

I did it same way as @jastrauss recommended. Main reason was to get access to the form data that was being persisted through the x-model.

<form action="" x-data="formState()" >
<input type="email" x-model="test" name="" id="">
</form>

<script type="text/javascript">

function formState() {
        window.model = { "test":""}
        return model }
        </script>

[HugoDF]

@mikklaos is correct. If you assign data to a variable on the window object, it will create a reference to the same object.
It allows you to read the alpine data and, technically, to write them too but the latter won't trigger the reactivity since it won't go through the apline proxies.

ah right, yeah I thought there was some gotcha, the object stored on the window will get mutated on the window as well as within the Alpine component but mutating the window reference won't update Alpine component 👍

[sinergantara]

@mikklaos is correct. If you assign data to a variable on the window object, it will create a reference to the same object.
It allows you to read the alpine data and, technically, to write them too but the latter won't trigger the reactivity since it won't go through the apline proxies.

ah right, yeah I thought there was some gotcha, the object stored on the window will get mutated on the window as well as within the Alpine component but mutating the window reference won't update Alpine component +1

Please give an alpinejs a feature to update x-data from outside the scope and also trigger it's reactivity

[SimoTod]

@sinergantara This discussion was related to v2. In v3, you can use Alpine.store to share properties with external scripts and update them from outside: https://alpinejs.dev/globals/alpine-store

[CarstenRuetz]

@SimoTod: alpine v3 has the nice Alpine.store. There is one drawback though when using alpine with livewire: $wire is not accessible upon initialising Alpine.store. And that magic $wire object is necessary for @entangle.

For now it seems, that the solution of @HugoDF also works with a minor change for alpine v3: the __x property of the element is now called _x_dataStack - it's actually an array of data objects (probably because of x-data nesting support in v3?)
So to access a property 'a' from JS (outside alpine), I tried elem._x_dataStack[0].$data.a which worked. It's also reactive and the entanglement with Livewire works as well :) Drawback: it's an internal API.

If anyone has a better solution, especially for entangling inside Alpine.store, I'm all open for it! @calebporzio?

[SimoTod]

It is, but it's an internal private api and although unlikely, it could change at any
time without being considered a breaking change. However, Caleb released Alpine.$data(el) in v3.8.0 which is probably a safer way to achieve what you want to do.

[smartexpert]

Thank you! I read through the entire documentation but didn't find anything about the Global Alpine.$data but it works.
Is this something just hasn't been updated in the documentation or an internal API that we should be cautious in using?

It is, but it's an internal private api and although unlikely, it could change at any time without being considered a breaking change. However, Caleb released Alpine.$data(el) in v3.8.0 which is probably a safer way to achieve what you want to do.

[ericxin1982]

Hi,

And like vue spc, they group html, css and js in one file, and how about alpinejs, is it possible?

Thanks
Eric Xin

[moman13]

you can use Alpine.$data(el) like this

<div x-data='{message:"hello world"}' id ="myDiv">
<span x-text="message"></span>
</div>

and in javascript like this

<script>
  let new_data =  Alpine.$data(document.getElementById('myDiv'));
            console.log(new_data.message)
</script>