所以我做了一个Vue From来问一个问题。所以我做了一个组件：

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

<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  ansPlaceholder: {
    type: String,
    default: 'default'
  },
  modelValue: {
    type: String
  },
  checkboxValue: {
    type: Boolean
  }
})

defineEmits(['update:modelValue', 'update:checkboxValue'])
// eslint-disable-next-line no-unused-vars
</script>

<style scoped></style>

主要成分：

<template>
  <div
    name="form container"
    class="mx-auto flex w-[70%] flex-col items-center justify-center rounded-3xl border-2 border-black"
  >
    <div name="question" class="flex w-[80%] flex-col items-center justify-center gap-3 p-3">
      <p class="text-2xl font-semibold">Question</p>
      <textarea class="w-[80%]" placeholder="Add a question" v-model="question"></textarea>
    </div>
    <div name="border" class="mx-auto w-[50%] rounded-3xl border-2 border-gray-400"></div>
    <div name="answers" class="flex w-[80%] flex-col gap-2 p-3">
      <FormAnswer
        ansPlaceholder="Answer A"
        v-model:modelValue="answers[0]"
        v-model:checkboxValue="isTrue[0]"
      ></FormAnswer>
      <FormAnswer
        ansPlaceholder="Answer B"
        v-model:modelValue="answers[1]"
        v-model:checkboxValue="isTrue[1]"
      ></FormAnswer>
      <!-- <FormAnswer ansPlaceholder="Answer C"></FormAnswer>
      <FormAnswer ansPlaceholder="Answer D"></FormAnswer>
      <FormAnswer ansPlaceholder="Answer E"></FormAnswer> -->

      <select>
        <option value="">Database 1</option>
        <option value="">Database 2</option>
      </select>
      <button
        class="mx-auto mt-2 w-fit rounded-3xl border-2 border-black p-3 text-xl font-semibold transition-all duration-500 hover:scale-105 hover:bg-black hover:text-white"
        @click="getFormData()"
      >
        Submit question
      </button>
    </div>
  </div>
</template>

<script setup>
import FormAnswer from '../AdminDashboardCmp/FormAnswer.vue'
import { ref } from 'vue'
const question = ref('')
const answers = []
const isTrue = ref('')

function getFormData() {
  console.log(answers)
}
</script>

<style scoped></style

目标是控制台将答案记录为na object { answer：'lorem ipsum'，isTrue：false }如果我点击复选框{ answer：'lorem ipsum'，isTrue：但是我不知道把布尔值作为一个 prop 传递。

<textarea
        class="w-full"
        :placeholder="ansPlaceholder"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
      ></textarea>

然后

const props = defineProps({
  ansPlaceholder: {
    type: String,
    default: 'default'
  },
  modelValue: {
    type: String
  },

defineEmits(['update:modelValue', 'update:checkboxValue'])

和

<FormAnswer
        ansPlaceholder="Answer A"
        v-model:modelValue="answers[0]"
        v-model:checkboxValue="isTrue[0]"
      ></FormAnswer>

可以传递文本，但不能传递布尔值。如何让它工作？