CODEWITHSUNDEEP
alpine.js
punund
punund

Reputation: 4421

Mutating data in Alpine JS

I am trying to achieve something that seems trivial.

    <main x-data='x'>
       <p x-text='foo'>
    </main>

The foo needs to be changed by some external event (callback from a library etc.)

This

    window.x = {
       foo: 'bar',
       setFoo: foo => this.foo = foo
    }
    
    // late, after `alpine:init`
    
    window.x.foo = 'boo' // doesn't work
    window.x.setFoo('boo')  // doesn't work

The same goes for the $store. I can try and declare Alpine.data('x'), but then there is no (documented) way to call a setter.

Upvotes: 0

Views: 1057

Answers (1)

Dauros
Dauros

Reputation: 10577

In your example x is now an Alpine.js component, so you have to use the Alpine.js way to mutate the reactive data. First, instead of p-text, you have to use x-text:

<main x-data='x'>
   <p x-text='foo'>
</main>

And to mutate data, you can access the reactive properties in $data object:

x.$data.foo = '42'

For the store you can use the global Alpine.store() method:

// Create number1 property in $store:
document.addEventListener('alpine:init', () => {
  Alpine.store('number1', '0')
})

// Set number1 to 42 externally:
Alpine.store('number1', 42)

Upvotes: 1

Related Questions