Appropriate two way binding for checkboxes in Vue JS

Question

I have the data from MySQL database in the form of "1" and "0" representing the boolean true and false.These values are set in the vue component in the following manner :

    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 the two-way binding I am currently using the computed properties as follows :

 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 wired on HTML code in following manner.

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

This works quite good for the two way binding in VUE. But there is a severe repetition in the code.

There is another way I have in mind using the @change event to track the changes in the checkbox :checked property and change the data attributes according but It seems to be one way binding and in the Vue console values are only updated when the I refresh the VUE panel.

Is there is a better way to achieve two way binding in this particular scenario?

palaѕн · Accepted Answer · 2020-03-26 13:15:39Z

5

You can achieve this by simply updating your template like:

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

and that's it. You will not need any computed properties anymore. You will get this.form.attribute1 value as "1" when checkbox will be checked or "0" when unchecked. Also, if you set form.attribute1 value as "1" then the checkbox will be checked by default as shown in the demo 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>

edited Mar 26, 2020 at 13:15

answered Mar 26, 2020 at 13:10

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

2 Comments

Dhaval Chheda Over a year ago

This worked like a charm. Thank you very much. The only thing I needed to change is to put quotation marks around the values in :true-value and :false-value attributes.

user16806454 Over a year ago

This works in Vue 3!

BeHappy · Accepted Answer · 2020-03-26 13:16:14Z

My favorite solution is to create component to achieve that:
My Checkbox.vue component:

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

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

and use it in other components:

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

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

Collectives™ on Stack Overflow

Appropriate two way binding for checkboxes in Vue JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related