javascript - Alpine JS Toggle Input Values

Question

I have a button that I want to toggle the value on a html input element from 0 to 1 and vice versa but I can't figure out how to do it with Alpine JS.

// input will be 0 or 1
<input type="hidden" value="0" name="status" x-ref="status">

// Toggles the status between 1 and 0 
<button type="button" 
x-data="{ on: false }" :class="{ 'bg-gray-200': !on, 'bg-primary-600': on }" 
@click="$refs.status.value = 1"
>Toggle Status</button>

I was able to get the code above to change the input value to 1 but can't figure out how to get it to toggle it back and forth. Any ideas would mean a lot.

question from:https://stackoverflow.com/questions/65912254/alpine-js-toggle-input-values

Answer 1

Here you go

<div x-data="{ status: false }">

    <form>
        <input type="hidden" value="0" name="status" x-model.number="status">


        <span x-text="status"></span>
        
        <button type="button" x-on:click="status = !status">
            Toggle Status
        </button>
    </form>
</div>

The global status is held at the div element. The status is outputted inside a span using x-text.

The hidden input is bound to the status using x-model and transforming the boolean value to a number using the .number modifier.