Vue.js 引导vue嵌套复选框v-model行为不正常

请简要检查一下这个组件代码

<template>
    <div>
        <b-form-checkbox
                id="checkbox-0"
                v-model="checkboxIsChecked"
                name="checkbox-1"

        > Nested checkbox
        </b-form-checkbox>
        <nested-checkbox-error class="ml-4" v-if="checkboxIsChecked"></nested-checkbox-error>
    </div>
</template>

<script>
  export default {
    name: "nested-checkbox-error",


    data(){
      return {
        checkboxIsChecked: false
      }
    }
  }
</script>

<style scoped>

</style>

嵌套复选框
导出默认值{
名称：“嵌套复选框错误”，
数据（）{
返回{
复选框已选中：false
}
}
}

---

在这里，我试图创建一个嵌套的复选框。当您选中该复选框时，应该会出现一个子复选框。对于根复选框，它可以正常工作。但对于子复选框，当我单击它时，父项的“checkboxIsChecked”是被切换的复选框。我对v-model的理解有问题吗？

看来您使用的是递归组件

组中的每个复选框（具有相同的

名称

）应具有不同的

值

，并且v型模型也应是一个数组（选中时，每个复选框将其值存储在数组中）

分配给每个复选框的ID也需要每个复选框都是唯一的