alpine.js - AlpineJS trigger native JS event with x-model (woocommerce cart)

Question

Trying to use AlpineJS in Woocommerce checkout. I have input number field with + - indicators to increase value, simplefield code:

<div x-data="{ qty: 1 }">
  <i @click="qty = qty > 2 ? qty - 1 : 1" class="icon-left-open"></i>

  <input type="number" x-model="qty">

  <i @click="qty = qty + 1" class="icon-right-open"></i>
</div>

So the problem is that when the input value changes woocommerce "update cart" button still has a disabled state. I thought this was happing because x-model and 2-way binding don't fire native change/input events?

How to tell woocommerce that value changed?

Answer 1

You can "watch" an x-data variable using $watch.

You can find out more about $watch here: https://github.com/alpinejs/alpine#watch

For example, this watches the "qty" value and if is changed it'll dispatch a "qty_true" event.

x-init="$watch('qty',value => { if (value) $dispatch('qty_true'); })"

Here's a version of your code with $watch, and the "qty_true" event listener.

<div x-data="{ qty: 1 }" x-init="$watch('qty',value => { if (value) $dispatch('qty_true'); })">
    <i @click="qty = qty > 2 ? qty - 1 : 1" class="icon-left-open"></i>
        
    <input type="number" x-model="qty">
        
    <i @click="qty = qty + 1" class="icon-right-open"></i>
</div>

<script type="text/javascript">
    window.addEventListener( 'qty_true', ( e ) => {
        console.log( 'qty now evaluates to true' );
        // enable your button here
    } );
</script>