在 Vue 3 组合式 API 中，若需将布尔值通过 v-model 双向绑定到子组件（如复选框），必须确保父组件中对应的响应式变量是布尔类型且可被正确索引；直接使用 ref('') 初始化会导致类型不匹配，应改用 reactive([true, false]) 或 ref([false, false]) 管理布尔数组。
在 vue 3 组合式 api 中，若需将布尔值通过 `v-model` 双向绑定到子组件（如复选框），必须确保父组件中对应的响应式变量是布尔类型且可被正确索引；直接使用 `ref('')` 初始化会导致类型不匹配，应改用 `reactive([true, false])` 或 `ref([false, false])` 管理布尔数组。
要让
✅ 正确的父组件初始化方式
原代码中 const isTrue = ref('') 创建的是一个字符串类型的 ref，而 isTrue[0] 实际上是 undefined（字符串不支持数字索引取布尔值），更严重的是它根本不是响应式数组。应改为：
import { ref, reactive } from 'vue'
// ✅ 推荐方案 1：使用 reactive 数组（语义清晰，适合多个布尔状态）
const isTrue = reactive([false, false]) // 对应 Answer A 和 B 的勾选状态
// ✅ 推荐方案 2：使用 ref 包裹数组（同样有效，更符合 ref 惯例）
// const isTrue = ref([false, false])同时，answers 也需初始化为响应式数组：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
const answers = ref(['', '']) // 避免 push 时丢失响应性
✅ 子组件 FormAnswer.vue 的修正要点
当前 checkbox 使用了 :value + @change，但复选框的 value 属性仅影响表单提交值，无法直接控制其勾选状态。正确做法是绑定 :checked 并监听 @change 更新布尔值：
立即学习“前端免费学习笔记（深入）”；
<template>
<div class="flex flex-col items-center justify-center gap-2">
<div class="flex w-[80%] items-center justify-center gap-2 rounded-3xl p-2">
<textarea
class="w-full"
:placeholder="ansPlaceholder"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
></textarea>
<!-- ✅ 关键修改：绑定 checked，并在 change 时 emit 布尔值 -->
<input
type="checkbox"
:checked="checkboxValue" <!-- 显示状态由 prop 控制 -->
@change="$emit('update:checkboxValue', $event.target.checked)" <!-- emit 实际布尔值 -->
/>
</div>
</div>
</template>
<script setup>
const props = defineProps({
ansPlaceholder: {
type: String,
default: 'default'
},
modelValue: {
type: String,
default: ''
},
checkboxValue: {
type: Boolean,
default: false
}
})
defineEmits(['update:modelValue', 'update:checkboxValue'])
</script>✅ 父组件调用保持不变（但依赖正确初始化）
<FormAnswer ansPlaceholder="Answer A" v-model:modelValue="answers[0]" v-model:checkboxValue="isTrue[0]" <!-- now isTrue[0] is a reactive boolean --> /> <FormAnswer ansPlaceholder="Answer B" v-model:modelValue="answers[1]" v-model:checkboxValue="isTrue[1]" />
✅ 提交逻辑完善：生成结构化数据
function getFormData() {
const formData = answers.value.map((answer, index) => ({
answer: answer.trim(),
isTrue: isTrue[index] // ✅ 此时 isTrue[index] 是布尔值 true/false
}))
console.log(formData)
// 输出示例: [{ answer: "Yes", isTrue: true }, { answer: "No", isTrue: false }]
}⚠️ 注意事项
- ❌ 不要给 checkbox 设置 :value="checkboxValue" —— 这会干扰原生行为，且 value 是字符串，无法反映勾选状态；
- ✅ 始终用 :checked 控制显示，用 $event.target.checked 获取真实布尔值；
- ✅ v-model:xxx 要求 xxx 必须是可读写的响应式引用（ref 或 reactive 中的属性）；
- ✅ 若后续动态增减答案项，建议改用 ref([]) + push() 并配合 v-for，避免索引越界。
通过以上调整，你就能稳定地将布尔值作为 prop 在父子组件间双向同步，并准确输出 { answer: string, isTrue: boolean } 格式的结构化数据。
