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

Question

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>

Option 1. It's a component but by in the end it will be a checkbox. On change I would look for it's siblings. 2. Globaly/state keep track of each checkbox — Kubwimana Adrien
– Kubwimana Adrien, Commented Dec 15, 2018 at 18:45

Boussadjra Brahim · Accepted Answer · 2018-12-15 20:16:25Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related