自定义 Bootstrap-Vue 复选框组件答案

【问题标题】：Custom Bootstrap-Vue checkbox component自定义 Bootstrap-Vue 复选框组件
【发布时间】：2021-05-15 01:51:03
【问题描述】：

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

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

【问题讨论】：

这些可以有不同的使用方式。你期望value 被选中和取消选中是什么？你能告诉我updateValue吗？
updateValue: function(value) { this.$emit("input", value); }
我仍然不知道你期望的价值是什么。真/假？
我期望复选框的状态，如果设置了复选框，则为 true，如果未选中，则为 false。问题是现在它以 empy 开头，然后我设置为 true 并且我可以工作，但是当我切换回 false 时它仍然是 true。

标签： javascript vue.js vuejs2 vue-component bootstrap-vue

【解决方案1】：

您在复选框中缺少v-model。删除value 属性和input 监听器，并使用v-model 和computed setter 优雅地重用来自父级的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 方法。

【讨论】：

【解决方案2】：

也许这些信息可以提供帮助：我从设置 selectedCompany: {} 状态的商店获取数据，然后从父组件（模态）我以这种方式绘制字段

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

在父级中我执行以下操作：

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

methods: {
    updateValue: function(value) {
        this.$emit("input", value);
    }
},

在迁移文件中，我将字段生产者设置为布尔值，默认（0），在模型中，我以这种方式改变字段

 public function getProductorAttribute($value){
    return $value ? true : false;
}

现在一切都应该更清楚了

【讨论】：

如果这样做，初始值将无法正确设置。例如，如果父级的值以true 开头，复选框将不会反映它。