Bootstrap-vue вложенный флажок v-модель не работает должным образом

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-модель?

Answer 1

Нельзя поместить флажок внутри другого флажка, поскольку внутренний помещается в метку внешнего флажка .При щелчке по ярлыку (или любому содержимому внутри него) будет установлен флажок, связанный с этим ярлыком.

Вам необходимо разместить свои «дочерние» флажки вне родительского флажка и использовать v-if для отображения дочерних флажков.когда родительский флажок установлен.