自定义 Bootstrap-Vue 复选框组件

Posted 2023-02-22

【中文标题】自定义 Bootstrap-Vue 复选框组件

【英文标题】：Custom Bootstrap-Vue checkbox component

【发布时间】：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。

【参考方案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 开头，复选框将不会反映它。