https://github.com/markmead/alpinejs-emit
Emit `x-data` changes to other Alpine JS elements 📣
https://github.com/markmead/alpinejs-emit
alpine-js alpinejs alpinejs-emit alpinejs-emitter alpinejs-plugin javascript-emit
Last synced: 12 months ago
JSON representation
Emit `x-data` changes to other Alpine JS elements 📣
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-emit
- Owner: markmead
- License: mit
- Created: 2022-11-02T11:36:31.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:15:15.000Z (over 1 year ago)
- Last Synced: 2025-03-24T20:12:30.778Z (over 1 year ago)
- Topics: alpine-js, alpinejs, alpinejs-emit, alpinejs-emitter, alpinejs-plugin, javascript-emit
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/utility-emit
- Size: 32.2 KB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Emit
Emit data changes to other Alpine JS elements 📣
## Install
### With a CDN
```html
```
### With a Package Manager
```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()
```
## Example
### Single Target
```html
Click
Toggle
Checked
```
The `$emit` 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_
### Multiple Targets
```html
Toggle
Checked
Toggle
Checked
```
This works exactly the same as the above but you pass an array of arrays
instead.
```js
$emit([
['.select1', {}],
['#select2', {}],
])
```
## Stats
