Alpine.js x-bound: Binding data properties

by rameel

HTML

<h3>Modifier: InOut (default)</h3>
<fieldset x-data="{ outer: 5 }" x-format>
  <legend>Outer scope</legend>
  <button @click="outer++">Outer++</button>

  <fieldset x-data="{ inner: 2 }" &inner="outer">
    <legend>Inner scope</legend>
      <button @click="inner++">Inner++</button>
      
      <p>Inner: {{ inner }}</p>
  </fieldset>

  Outer: {{ outer }}
</fieldset>

<h3>Modifier: In</h3>
<fieldset x-data="{ outer: 5 }" x-format>
  <legend>Outer scope</legend>
  <button @click="outer++">Outer++</button>

  <fieldset x-data="{ inner: 2 }" &inner.in="outer">
    <legend>Inner scope</legend>
      <button @click="inner++">Inner++</button>
      
      <p>Inner: {{ inner }}</p>
  </fieldset>

  Outer: {{ outer }}
</fieldset>

<h3>Modifier: Out</h3>
<fieldset x-data="{ outer: 5 }" x-format>
  <legend>Outer scope</legend>
  <button @click="outer++">Outer++</button>

  <fieldset x-data="{ inner: 2 }" &inner.out="outer">
    <legend>Inner scope</legend>
      <button @click="inner++">Inner++</button>
      
      <p>Inner: {{ inner }}</p>
  </fieldset>

  Outer: {{ outer }}
</fieldset>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-bound@1/alpinegear-bound.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-format@1/alpinegear-format.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>

CSS

fieldset {
  margin: 1rem 0;
}

h3 {
  margin-block: 1.5rem -0.5rem;
}

p {
  margin-bottom: 0;
}