Unique creation: Bespoke Bootstrap-Vue selection box module

Question

Unique creation: Bespoke Bootstrap-Vue selection box module

Struggling to create dynamic form components, particularly 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>

Shown below is how I implement the code

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

Issue arises as v-model content does not change unlike input fields. Seeking assistance. Can someone guide me?

p.s. Utilizing bootstrap-vue for this project Thanks in advance!

javascript vue.js vuejs2 vue-component bootstrap-vue

Answer 1

Answer №1

Make sure to include v-model on the checkbox. Instead of using the value attribute and the input listener, opt for v-model with a calculated setter to efficiently reuse the prop value from the parent without altering 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 also remove the updateValue method.

Answer 2

Make sure to include v-model on the checkbox. Instead of using the value attribute and the input listener, opt for v-model with a calculated setter to efficiently reuse the prop value from the parent without altering 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 also remove the updateValue method.

Answer 3

Answer №2

Perhaps this information can provide some assistance: I retrieve the data from the store where I initialize the state of selectedCompany: {}, then in the parent component (modal) I render the fields like this:

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

Within the parent component, I handle it as follows:

 <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 define the field productor as a boolean with a default value of (0) and within the model, I transform the field like this:

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

Hopefully, everything is clearer now.

Answer 4

Perhaps this information can provide some assistance: I retrieve the data from the store where I initialize the state of selectedCompany: {}, then in the parent component (modal) I render the fields like this:

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

Within the parent component, I handle it as follows:

 <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 define the field productor as a boolean with a default value of (0) and within the model, I transform the field like this:

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

Hopefully, everything is clearer now.

Unique creation: Bespoke Bootstrap-Vue selection box module

Answer №1

Answer №2

Similar questions

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

Where is the function returned by redux-thunk invoked?

Unable to set the cookie when using the fetch API

The value returned by EntityRecognizer.resolveTime is considered as 'undefined'

Transmit the identification to angularjs for the genuine content to be displayed

Ensure NodeJS/JSDom waits for complete rendering before performing scraping operations

Vuetify: Utilizing Time Range Inputs for Start and End Time

Tips for changing the size and color of SVG images in a NextJS application

typescript: the modules with relational paths could not be located

The TypeORM connection named "default" could not be located during the creation of the connection in a Jest globalSetup environment

What is the best pattern to utilize for these types of tasks?

Leverage the power of express-session in your NextJS project

Utilize jQuery to generate an HTML table from a JSON array with rows (Issue: undefined error)

jquery token selection dropdown box

Modifying an object's attribute in React.js by toggling a checkbox

Steps for accessing CSS variables within a scoped style block in Vue with Buefy_integration

Converting a customer ShaderMaterial to Lambert Material using Three.js

Communicating through Socket.io between various Node.js routes

Requesting data from the application to the MongoDB database is currently malfunction

Using innerHTML within a JS function causes the class to malfunction