VueJS 2自定义子组件切换Bootstrap Vue复选框时v-model不更新问题

问题根因 #

你遇到的问题是两个属性使用错误导致的：

1. b-form-checkbox 选中状态绑定属性错误
   :value 在 b-form-checkbox 组件中是用来定义「复选框选中时对应的返回值」的，并非控制复选框是否选中的属性，控制选中状态需要使用 :checked 属性。你之前错误绑定了:value，导致组件内部自己维护了选中状态，和你传入的value.acceptTerms没有关联，状态变化时也不会触发你绑定的@input事件，所以只会在初始化时打印一次日志。
2. 事件返回值取值错误
   Bootstrap Vue 对表单组件的事件做了封装，@input 事件的返回值直接是布尔类型的选中状态，不是原生事件对象，所以你尝试用$event.target.checked取值会报undefined错误。

修复方案 #

只需要修改子组件模板中b-form-checkbox的绑定属性即可，其他逻辑不需要改动：

<template lang="pug">
b-form-checkbox(
  :checked="value.acceptTerms"
  @input="handleInput('acceptTerms', $event)"
  :disabled="disabled") Accept terms and conditions
</template>

可选优化 #

你也可以用v-model语法糖简化写法，避免混淆属性用途：

<template lang="pug">
b-form-checkbox(
  v-model="acceptTerms"
  :disabled="disabled") Accept terms and conditions
</template>

<script>
export default {
  name: "RegistrationForm",
  mixins: [validationMixin],
  props: {
    value: {
      type: Object,
      required: true
    },
    v: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  }, 
  computed: {
    acceptTerms: {
      get() {
        return this.value.acceptTerms
      },
      set(val) {
        this.handleInput('acceptTerms', val)
      }
    }
  },
  methods: {
    handleInput(key, value) {
      console.log(`key: ${key}, value: ${value}`);
      this.v.$touch();
      this.$emit("input", { ...this.value, [key]: value });
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者Robert Strauch