自定义 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内容不会改变，但会改变输入字段。 怎么了？ 有人能帮我吗？

ps 我正在使用 bootstrap-vue 谢谢！

Answer 1

您在复选框上缺少v-model 。 删除value属性和input侦听器，并使用带有计算设置器的v-model来优雅地重用来自父级的 prop 值作为 model 而不改变它：

<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方法。

Answer 2

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

 <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);
    }
},

在迁移文件中，我将字段生产者设置为 boolean 并使用默认值（0），在 model 中，我以这种方式改变字段

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

现在一切都应该更清楚了