vue.js - Bootstrap-vue 嵌套复选框 v-model 行为不正确

Question

请简要回顾一下这个组件代码。

<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>

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

标签： vue.jsbootstrap-vue

Answer 1

看来您正在使用递归组件。

组中的每个复选框（具有相同的name）应该有一个不同的value，并且 v-model 也应该是一个数组（每个复选框在选中时将其值存储在数组中）。

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