javascript - 自定义 Bootstrap-Vue 复选框组件

Question

我正在尝试制作组件来创建动态表单，但我在使用复选框时遇到了问题

<template v-if="type === 'switch'">
            <b-form-checkbox
                switch
                size="lg"
                :name="name"
                :id="name"
                :ref="name"
                :value="value"
                v-on:input.native="updateValue($event.target.value)"
                >{{ value }}</b-form-checkbox
            >
        </template>

下面是我调用代码的方式

<FormRow
                type="switch"
                name="productor"
                rule="required"
                v-model="selectedCompany.productor"
            />

问题是 v-model 的内容没有改变，但输入字段改变了。怎么了？有人可以帮助我吗？

附注我正在使用 bootstrap-vue谢谢!

Answer 1

您在复选框上遗漏了 v-model。删除 value 属性和 input 监听器，并使用带有 computed setter 的 v-model优雅地重用父级的 prop 值作为模型而不改变它:

<b-form-checkbox
  switch
  size="lg"
  :name="name"
  :id="name"
  :ref="name"
  v-model="bvalue"
>{{ value }}
</b-form-checkbox>

computed: {
  bvalue: {
    get() { return this.value },
    set(value) { this.$emit('input', value) }
  }
}

您也可以删除 updateValue 方法。