Vue中Boolean类型Prop传递问题及表单数据格式实现

问题根源 #

• 父组件中answers是普通数组，不具备响应式特性；isTrue被定义为字符串类型的ref，而非布尔值数组，无法匹配子组件的布尔类型Prop要求
• 子组件复选框错误使用:value绑定布尔值，且触发更新时传递的是字符串类型的value，而非复选框实际的checked布尔状态

分步修复方案 #

1. 修正父组件响应式数据定义 #

将答案和布尔状态数组改为响应式结构，初始化对应数量的默认值：

<script setup>
import FormAnswer from '../AdminDashboardCmp/FormAnswer.vue'
import { ref } from 'vue'
const question = ref('')
// 初始化响应式答案数组，默认空字符串
const answers = ref(['', ''])
// 初始化响应式布尔数组，默认未勾选
const isTrue = ref([false, false])

function getFormData() {
  // 组合成预期格式的对象数组
  const formData = answers.value.map((answer, index) => ({
    answer,
    isTrue: isTrue.value[index]
  }))
  console.log(formData)
}
</script>

2. 修正子组件复选框绑定逻辑 #

子组件中复选框改用:checked绑定布尔状态，触发更新时传递checked布尔值：

<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>
      <input
        type="checkbox"
        :checked="checkboxValue"
        name="isTrue"
        @change="$emit('update:checkboxValue', $event.target.checked)"
      />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  ansPlaceholder: {
    type: String,
    default: 'default'
  },
  modelValue: {
    type: String
  },
  checkboxValue: {
    type: Boolean,
    default: false // 添加默认值避免警告
  }
})

defineEmits(['update:modelValue', 'update:checkboxValue'])
</script>

验证效果 #

修改完成后点击提交按钮，控制台将输出符合预期格式的数组：

[
  { answer: '文本内容A', isTrue: true },
  { answer: '文本内容B', isTrue: false }
]

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