Bootstrap-vue nested checkbox v-model not behaving properly

Question

Please briefly go over this component code.

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

Here, I am trying to make a nested checkbox. A child checkbox is supposed to appear when you check the box. It works fine for the root checkbox. But for the child checkbox, when I click it, parent's 'checkboxIsChecked' is the one being toggled. Is something wrong with how I understand v-model?

Answer 1

It appears you are using a recursive component.

Each checkbox in a group (that has the same name) should have a different value, and the v-model should also be an array (each checkbox, when checked, stores it's value in the array).

The ID assigned to each checkbox also needs to be unique per checkbox.