Alpine JS Manage

Manage another Alpine JS elements x-data values 👩‍✈️

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-manage@latest/dist/manage.min.js"
></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

With a Package Manager

yarn add -D alpinejs-manage

npm install -D alpinejs-manage

import Alpine from 'alpinejs'
import manage from 'alpinejs-manage'

Alpine.plugin(manage)

Alpine.start()

Example

<button x-data x-on:click="$manage('#TargetEl').userName = 'John Cena'">
  Make Invisible
</button>

<div x-data="{ userName: 'Jane Doe' }" id="TargetEl">
  <span x-text="userName"></span>
</div>

Here we're targeting the TargetEl element and setting the userName to "John Cena".

Stats