0

我有一个按钮，我想将 html 输入元素上的值从 0 切换到 1，反之亦然，但我不知道如何使用 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>

我能够获得上面的代码来将输入值更改为 1，但无法弄清楚如何让它来回切换。任何想法都意味着很多。

4

1 回答 1

2

干得好

<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>

全局status保存在div元素上。状态在spanusing中输出x-text。

hiddeninput绑定到status使用修饰符x-model并将boolean值转换为数字。.number

更新

无论出于何种原因，这不再起作用，我在这里创建了一个新示例：https ://codepen.io/codedge/pen/wvgNqee

它只定义了两个x-data值，一个用于布尔值，一个用于整数。

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

    <form>
        <input type="hidden" value="0" name="num">


        <span x-text="num"></span>
        
        <button type="button" x-on:click="status = !status; num = (status == true ? 1 : 0)">
            Toggle Status
        </button>
    </form>
</div>
于 2021-01-27T22:25:28.563 回答