TailwindCSS HeadlessUI Switch与InertiaJS useForm()绑定失效问题

Headless UI的<Switch>组件的v-model实现逻辑，和InertiaJS useForm()返回的响应式表单对象存在兼容性问题——虽然useForm基于reactive()，但组件内部的双向绑定触发逻辑无法正确识别并更新表单对象的字段。

解决方法：手动绑定状态与事件 #

放弃v-model，改用手动绑定checked属性和change事件来控制开关状态：

<template>
  <Switch
    :checked="form.enabled"
    @change="form.enabled = !form.enabled"
  >
    <!-- 开关内容，比如标签、滑块元素 -->
  </Switch>
</template>

<script setup>
import { Switch } from '@headlessui/vue'
import { useForm } from '@inertiajs/vue3'

const form = useForm({
  enabled: false,
  // 其他表单字段
})
</script>

为什么这个方法有效？ #

useForm()返回的表单对象支持直接赋值更新字段，手动触发change事件并修改form.enabled，能绕开HeadlessUI v-model与Inertia表单对象的适配问题，同时保证表单状态的响应式更新，完全兼容Inertia的表单提交逻辑。

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