Как установить для одного экземпляра флажка компонента значение false, если для другого экземпляра установлено значение true?

Question

Как я могу создать компонент флажка в vue.js, скажем (представление HTML):

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

Поэтому, когда я создаю два таких флажка, я хочу изменить другой на false, если первый установлен на true, и наоборот. Также они оба могут быть ложными одновременно.

(Я новичок в vue.js, я просто хочу добавить это в существующей среде).

Код, который существует

    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;
    }
});

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

Answer 1

Вы должны получить испущенные значения от дочерних компонентов и добавить обработчики методов @change событие для каждого компонента, и когда вы проверяете один компонент другой не будет проверен, первоначально они не проверены

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>