CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentbootstrap-vue
netnull
netnull

Reputation: 221

Custom Bootstrap-Vue checkbox component

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!

Upvotes: 3

Views: 2304

Answers (2)

Dan
Dan

Reputation: 63059

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.

Upvotes: 1

netnull
netnull

Reputation: 221

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

Upvotes: 0

Related Questions