Vue(InertiaJS)/Tailwind开关复选框提交值恒为true问题

你的代码存在4处直接导致值同步失效的错误，最终提交表单时字段值始终为初始true：

• v-model指令语法错误：你写的是:v-model="checked"，前置冒号会把v-model作为普通属性绑定，Vue无法识别双向绑定逻辑，原生复选框状态和组件内部值完全脱节。
• 父子组件值同步断裂：子组件虽然通过$emit('input')抛出了变更后的值，但父组件调用Checkbox时既没写v-model也没绑定@input事件更新父级的active变量，提交时读取的始终是父级初始化后从未更新的active值。
• 复选框属性绑定冲突：input标签上同时绑定了:value、:checked、错误的:v-model三个控制选中状态的属性，原生checkbox默认value为on，自定义value绑定会干扰表单提交值，v-model本身会自动处理选中状态，不需要额外绑定checked和value。
• 命名冲突+重复定义：子组件props里声明了checked属性，又在data里定义了同名checked变量，响应式优先级混乱；父组件同时在props和data里声明了active变量，props优先级高于data，data里的初始化值会被props覆盖，初始状态也可能异常。

1. 修正Checkbox子组件代码 #

删除冲突的属性绑定，去掉重复的变量定义，正确实现v-model双向绑定逻辑：

<template>
  <div class="form-check form-switch mt-5 form-inline first:mt-0">
    <label v-if="label" class="form-label sm:w-20">{{ label }} - this is {{ innerChecked }}</label>
    <input 
      type="checkbox" 
      class="form-check-input mr-0 ml-3" 
      v-model="innerChecked"
      :id="id"
    />
  </div>
</template>

<script>
import { v4 as uuid } from 'uuid'
export default {
  props: {
    id: {
      default() {
        return `checkbox-${uuid()}`
      },
    },
    // v-model默认接收value prop，兼容原有active传参方式
    value: Boolean,
    active: Boolean,
    error: String,
    label: String,
  },
  data() {
    return {
      // 内部状态用独立命名，避免和prop命名冲突
      innerChecked: this.value ?? this.active ?? false
    }
  },
  watch: {
    // 内部状态变化时同步通知父组件
    innerChecked(val) {
      this.$emit('input', val)
    },
    // 父组件传值变化时同步更新内部选中状态
    value(val) {
      this.innerChecked = val
    },
    active(val) {
      this.innerChecked = val
    }
  }
}
</script>

2. 修正父组件调用逻辑 #

删除重复的props定义，通过v-model和子组件做双向绑定，提交时直接读取父级同步后的active值：

<Checkbox label="Active" v-model="active" />

<script>
import Checkbox from '@/components/Checkbox/Checkbox'

export default {
  components: {
    Checkbox,
  },
  props: {
    user: Object,
  },
  data() {
    return {
      active: this.user.active != 0,
    }
  },
  methods: {
    submitForm() {
      // 提交时主动传active字段，避免原生表单未选中checkbox时漏传字段
      this.$inertia.post('/user/update', {
        // 其他表单字段...
        active: this.active
      })
    }
  }
}
</script>

• 原生HTML表单序列化时，未选中的checkbox字段不会被包含在提交数据里，如果后端代码给该字段设置了默认值true，哪怕前端没传值也会被后端设为true。用Inertia提交时建议手动构造提交数据，明确传入布尔类型的active值，不要完全依赖原生表单的序列化结果。
• Vue的v-model本身是v-bind:value+v-on:input的语法糖，不需要额外给表单元素绑定checked、value属性，也不需要手动写@change翻转值，重复绑定反而会造成状态冲突。

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