On gists

Change something via 3 ways ($refs, $el, $nextTick)

Alpine.js

index.html Raw #

<div x-data>
  <span x-ref="foo"></span>
  <button  class="btn btn-dark" @click="$refs.foo.innerText = 'Smashing Magazine'">Click me</button>
</div>

<div x-data>
  <button  class="btn btn-secondary" @click="$el.innerHTML = 'Smashing Magazine'">Click me</button>
</div>

<div x-data="{ text: 'Click me' }">
  <button class="btn btn-primary" @click="
            text = 'Clicked';
            $nextTick(() => {
                    // This will output 'Clicked', not 'Click me'
                    console.log($event.target.innerText) 
            });" x-text="text"></button>
</div>