Utilizing the correct method for binding checkboxes in Vue JS for effective two-way communication

Question

Utilizing the correct method for binding checkboxes in Vue JS for effective two-way communication

I am working with data retrieved from a MySQL database where "1" and "0" represent boolean true and false. In my Vue component, I have set these values as shown below:

    data(){
    return {
    form : {
         attribute_1 : "1", //attribute 1 is true
         attribute_2 : "0", //attribute 2 is false
         attribute_3 : "1", //attribute 3 is true
          }
        }
       }

To maintain two-way binding, I have implemented computed properties like this:

 attribute1: {
            get(){
                return this.form.attribute_1 == "1" ? true : false ;
            },
            set(newValue){
                this.form.attribute_1 = newValue ? "1" : "0";
            }
        },
 attribute2: {
            get(){
                return this.form.attribute_2 == "1" ? true : false ;
            },
            set(newValue){
                this.form.attribute_2 = newValue ? "1" : "0";
            }
        }, ...

These computed properties are used in the HTML code like so:

<input type="checkbox"  checked v-model="attribute1">
<input type="checkbox"  checked v-model="attribute2">

While this approach works well for achieving two-way binding in Vue, it does result in repetitive code.

Another potential method involves using the @change event to monitor checkbox changes, but this seems to offer only one-way binding. The Vue console shows updated values only upon panel refresh.

Are there any better techniques for implementing two-way binding in this specific scenario?

javascript vue.js vuejs2

Answer 1

Answer №1

To update your template to achieve this, follow these steps:

<input type="checkbox" v-model="form.attribute1" :true-value="1" :false-value="0">
<input type="checkbox" v-model="form.attribute2" :true-value="1" :false-value="0">

With these changes, you won't need any computed properties anymore. The value of this.form.attribute1 will be "1" when the checkbox is checked and "0" when unchecked. Additionally, if you set form.attribute1 as "1", then the checkbox will be checked by default, as demonstrated below.

DEMO:

new Vue({
  el: '#app',
  data(){
    return {
      form: {
        attribute1: "1", //attribute 1 is true
        attribute2: "0"  //attribute 2 is false
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="checkbox" v-model="form.attribute1" :true-value="1" :false-value="0">
  <label for="checkbox">{{ form.attribute1 }}</label><br/><br/>
  <input type="checkbox" v-model="form.attribute2" :true-value="1" :false-value="0">
  <label for="checkbox">{{ form.attribute2 }}</label><br/><br/>
</div>

Answer 2

To update your template to achieve this, follow these steps:

<input type="checkbox" v-model="form.attribute1" :true-value="1" :false-value="0">
<input type="checkbox" v-model="form.attribute2" :true-value="1" :false-value="0">

With these changes, you won't need any computed properties anymore. The value of this.form.attribute1 will be "1" when the checkbox is checked and "0" when unchecked. Additionally, if you set form.attribute1 as "1", then the checkbox will be checked by default, as demonstrated below.

DEMO:

new Vue({
  el: '#app',
  data(){
    return {
      form: {
        attribute1: "1", //attribute 1 is true
        attribute2: "0"  //attribute 2 is false
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="checkbox" v-model="form.attribute1" :true-value="1" :false-value="0">
  <label for="checkbox">{{ form.attribute1 }}</label><br/><br/>
  <input type="checkbox" v-model="form.attribute2" :true-value="1" :false-value="0">
  <label for="checkbox">{{ form.attribute2 }}</label><br/><br/>
</div>

Answer 3

Answer №2

One approach I really like is creating a custom component for this purpose. Let's take a look at My Checkbox.vue component:

<template>
    <input type="checkbox" :checked="isChecked" @change="handleChange" />
</template>

<script>
export default {
    props: {
        value: {}
    },
    computed: {
        isChecked() {
            return this.value === "1" || this.value === true;
        }
    },
    methods: {
        handleChange(event) {
            this.$emit("input", event.target.checked ? "1" : "0");
        }
    }
};
</script>

You can use this component in other components like this:

<template>
    <div>
        <Checkbox v-model="isChecked" />
    </div>
</template>

<script>
import Checkbox from "./Checkbox";
export default {
    components: {
        Checkbox
    },
    data() {
        return {
            isChecked: "1"
        }
    }
};
</script>

Answer 4

One approach I really like is creating a custom component for this purpose. Let's take a look at My Checkbox.vue component:

<template>
    <input type="checkbox" :checked="isChecked" @change="handleChange" />
</template>

<script>
export default {
    props: {
        value: {}
    },
    computed: {
        isChecked() {
            return this.value === "1" || this.value === true;
        }
    },
    methods: {
        handleChange(event) {
            this.$emit("input", event.target.checked ? "1" : "0");
        }
    }
};
</script>

You can use this component in other components like this:

<template>
    <div>
        <Checkbox v-model="isChecked" />
    </div>
</template>

<script>
import Checkbox from "./Checkbox";
export default {
    components: {
        Checkbox
    },
    data() {
        return {
            isChecked: "1"
        }
    }
};
</script>

Utilizing the correct method for binding checkboxes in Vue JS for effective two-way communication

Answer №1

Answer №2

Similar questions

The Mysteries of Key Codes in JavaScript

Is there an easy way to determine if an element inside a Vue component is overflowing?

What is the process of integrating ES6 modules with app.get in a Node/Express routing application?

What is the reason for my Firestore listener consistently retrieving data from the server despite having offline persistence enabled?

Reactive map not triggering Vue computed() function

JavaScript code to find a date within a specified range

"Using JavaScript to trigger a button click event, and then

Verify if the user is currently inputting text within a specific range of characters within

Even when there is a change in value within the beforeEach hook, the original value remains unchanged and is used for dynamic tests

Is there a way to display shortened text only when hovering without altering the height of the list box?

How can I prevent my code from resetting every time a state update occurs?

Unable to submit /api/sentiment

Issues with Javascript functionality on aspdotnetstorefront site

I am facing an issue where both curl and file_get_contents are not functioning properly after

Show the chosen item from a dropdown menu using Bootstrap

The error message "MediaMetadata is not defined as no-undef and cannot be used as a constructor" appeared when trying to use MediaMetadata

Leveraging Next.js 'useClient' in conjunction with server component (global)

Using Parseint in a Vue.js method

Unable to retrieve information from JSON file utilizing AngularJS version 1.6

Ways to adjust the position of a DIV based on its index value