Alpine JS 切换输入值

Question

我有一个按钮，我想将 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，但无法弄清楚如何让它来回切换。任何想法都意义重大。

Answer 1

给你

<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 元素中。使用 x-text.

在 span 内输出状态

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

更新

无论出于何种原因，这不再有效，我在这里创建了一个新示例：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>

Alpine JS 切换输入值

Alpine JS Toggle Input Values

javascript

alpine.js

更新