CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
Sead Ordagić
Sead Ordagić

Reputation: 53

How to set one checkbox instance of component to false, when another instance is set to true?

How can I create a checkbox component in vue.js, lets say (HTML representation):

<v-switch></v-switch>
<v-switch></v-switch>

So when I create two checkboxes like this I want to change the other one to false if the first one is set to true, and and vice versa. Also they both can be false at the same time.

(I am new with vue.js,I just want to add this in a existing environment).

Code that exists

    Vue.component('v-switch', {
    props: ['value', 'disabled', 'color'],
    template: `
        <div class="switch">
            <label>
                <input type="checkbox" :disabled="disabled" @change="emitChange()" v-model="data">
                <span class="lever" :class="color_class"></span>
            </label>
        </div>`,
    data: function () {
        return {
            data: this.value || '',
            color_class: 'switch-col-' + (this.color || 'green')
        };
    },
    methods: {
        emitChange: function () {
            var vm = this;
            setTimeout(function () {
                vm.$emit('change', vm.data);
            });
        }
    },
    watch: {
        data: function () {
            this.$emit('input', this.data);
        },
        value: function () {
            this.data = this.value;
        }
    },
    mounted: function () {
        //this.data = this.value;
    }
});

and the HTML:

 <v-input-wrap translate="newsletter" class="col-sm-1 col-12">
 <v-switch v-model="contact_persons[index].newsletter"></v-switch>
 </v-input-wrap>
<v-input-wrap translate="blacklist" class="col-sm-1 col-12">
 <v-switch v-model="contact_persons[index].blacklist"></v-switch>
 </v-input-wrap>

Upvotes: 0

Views: 271

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should receive the emitted values from child components and add method handlers of @change event to each component and when you check one component the other one will be unchecked, initially they're unchecked 

Vue.component('v-switch', {
  props: ['value', 'disabled', 'color'],
  template: `
        <div class="switch">
            <label>
                <input type="checkbox" :disabled="disabled" @change="emitChange" v-model="data" />
                <span class="lever" :class="{'switch-col-green':value,'switch-col-red':!value}">{{value}}</span>
            </label>
        </div>`,
  data: function() {
    return {
      data: this.value || false,
      color_class: 'switch-col-' + (this.color || 'green')
    };
  },
  methods: {
    emitChange: function() {
      var vm = this;
      console.log(this.data)

      vm.$emit('change', vm.data);

    }
  },
  watch: {
    data: function() {
      this.$emit('input', this.data);
    },
    value: function() {
      this.data = this.value;
    }
  },
  mounted: function() {
    //this.data = this.value;
  }
});


// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      ch1: false,
      ch2: false
    }
  },
  methods: {
    change1(v) {
      this.ch1 = v;
      this.ch1?this.ch2 = !this.ch1:this.ch2;
    },
    change2(v) {
      this.ch2 = v;
      this.ch2?this.ch1 = !this.ch2:this.ch1;
    }

  }
});
.switch-col-green{
color:green;
}
.switch-col-red{
color:red;
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <v-switch :value="ch1" @change="change1"></v-switch>
  <v-switch :value="ch2" @change="change2"></v-switch>
</div>

Upvotes: 1

Related Questions