Custom Bootstrap-Vue checkbox component

Question

I’m trying to make components to create a dynamic form but I’m having trouble with checkboxes

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

Here's how I call the code

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

The problem is that the v-model content doesn't change but it does with input fields. What’s wrong? Can someone help me?

p.s. I’m working with bootstrap-vue Thank you!

These can be used different ways. What did you expect value to be checked and unchecked? And could you show updateValue? — Dan
– Dan, Commented Feb 11, 2021 at 11:36
updateValue: function(value) { this.$emit("input", value); } — netnull
– netnull, Commented Feb 11, 2021 at 11:52
I still don't know what you expect value to be. true / false? — Dan
– Dan, Commented Feb 11, 2021 at 12:03
I expect the status of the checkbox, so true if checkbox is set, false if is unchecked. The problem is that right now it starts with empy, then i set to true and i works but when i switch back to false it remains true. — netnull
– netnull, Commented Feb 11, 2021 at 12:09

tony19 · Accepted Answer · 2022-07-16 02:05:41Z

1

You're missing v-model on the checkbox. Remove the value attribute and the input listener and use v-model with a computed setter to elegantly reuse the prop value from the parent as the model without mutating it:

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

You can remove the updateValue method too.

edited Jul 16, 2022 at 2:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 11, 2021 at 12:17

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

netnull · Accepted Answer · 2021-02-11 12:19:50Z

0

Maybe this infos can help: I get the data from the store where i set the state of selectedCompany: {}, then from the parent component (modal) I draw the fields in this way

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

in the parent I do the following:

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

In the migration file i set the field productor as boolean with default(0) and in the model i mutate the field in this way

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

Everything should be more clear now

answered Feb 11, 2021 at 12:19

netnull

2211 gold badge6 silver badges13 bronze badges

1 Comment

Dan Over a year ago

The initial value won't be set properly if you do this. For example if the parent's value starts as true, the checkbox will not reflect it.

Collectives™ on Stack Overflow

Custom Bootstrap-Vue checkbox component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related