javascript - 当组件的一个复选框实例设置为 true 时，如何将另一个实例设置为 false？

Question

如何在 vue.js 中创建复选框组件(HTML 表示):

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

因此，当我创建两个这样的复选框时，如果第一个设置为 true，我想将另一个设置为 false，反之亦然。而且它们也可能同时为假。

(我是 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>