Emit `x-data` changes to other Alpine JS elements 📣
npm install alpinejs-emitEmit data changes to other Alpine JS elements 📣
``html
src="https://unpkg.com/alpinejs-emit@latest/dist/emit.min.js"
>
`
`shell
yarn add -D alpinejs-emit
npm install -D alpinejs-emit
`
`js
import Alpine from 'alpinejs'
import emit from 'alpinejs-emit'
Alpine.plugin(emit)
Alpine.start()
`
`html
Checked
The
will change the value of isChecked on the TargetEl element.You'll notice within the
TargetEl element it has its own method of changing
the isChecked value, this will still work.If you wanted to toggle the value of
isChecked you can do so with
{ isChecked: '!!' }, this will check for !! and if found, toggle the value
based on the isChecked value on the TargetEl element.#### Multiple Targets with a Shared Selector
This has been handled before you behind the scenes.
_
isChecked is just an example, you don't need to call your Alpine JS data
that_$3
`html
x-init="$watch('isChecked', () => $emit([
['#TargetEl', { isChecked }],
['#TargetEl2', { userName: 'Doe' }]
]))"
>
Checked
Checked
This works exactly the same as the above but you pass an array of arrays
instead.
js
$emit([
['.select1', {}],
['#select2', {}],
])
``
