如何实现Alpine.js开关组件向表单传值，提交时携带指定参数

针对你的需求，这里提供两种简单的实现方式：

方案一：使用隐藏输入框控制参数提交 #

通过添加一个隐藏的<input>元素，根据on的值控制它是否被禁用，从而决定提交时是否携带enabled=on参数：

<div x-data="{on : true}">
    <form action="https://jsonplaceholder.typicode.com/todos/1">
        Enabled : <span x-text="on ? '[$]' : '[ ]'" @click="on = !on"></span><br>
        <!-- 仅当on为true时，该输入框会被提交 -->
        <input type="hidden" name="enabled" value="on" x-bind:disabled="!on">
        <input type="submit" value="Submit" />
    </form>
</div>

原理：表单提交时，被禁用的输入元素不会被包含在请求参数中。当on为true时，隐藏输入框处于启用状态，会自动将enabled=on追加到请求URL的查询参数中；当on为false时，输入框被禁用，不会携带该参数。

方案二：动态修改表单的action属性 #

直接通过Alpine的x-bind指令动态拼接表单的action属性值，根据on的状态决定是否添加查询参数：

<div x-data="{on : true}">
    <form x-bind:action="`https://jsonplaceholder.typicode.com/todos/1${on ? '?enabled=on' : ''}`">
        Enabled : <span x-text="on ? '[$]' : '[ ]'" @click="on = !on"></span><br>
        <input type="submit" value="Submit" />
    </form>
</div>

原理：利用模板字符串语法，根据on的值动态生成表单的提交地址。当on为true时，action会拼接?enabled=on；为false时则使用原始URL。

内容的提问来源于stack exchange，提问作者Xinjie ZHANG