Alpine JS 切换输入值

Posted 2023-03-07

【中文标题】Alpine JS 切换输入值

【英文标题】：Alpine JS Toggle Input Values

【发布时间】：2021-04-30 21:08:23

【问题描述】：

我有一个按钮，我想将 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，但不知道如何让它来回切换。任何想法都意味着很多。

【参考方案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>

【讨论】：

这不起作用。值更改为“true”或“false”作为字符串。我需要“0”和“1”。 Laravel 验证将“0”和“1”（即使它们是字符串）视为布尔值。但是“true”和“false”作为字符串，其中“false”被视为true，因为它不是空字符串。 .nu​​mber 修饰符无效。