Vue

by Yasin Yoruk

HTML

<template id="toggle">
    <div class="switch">
        <input type="checkbox" v-model="checkValueIn" @change="sendValue()">
        <input type="checkbox" id="toggle" v-model="checkValueIn" @change="sendValue()" />
        <div>
            <label for="toggle"></label>
        </div>
    </div>
</template>

<div id="app">
<h1>Hello</h1>
  <toggle :checkvalue="val1" @get-toggle="setVal1"></toggle>
  <toggle :checkvalue="val2" @get-toggle="setVal2"></toggle>

</div>

CSS

.switch {
    display: inline-block;
    margin: 0 10px;
}
.switch input[type="checkbox"] {
    /*display: none;*/
}
.switch div {
    height: 2em;
    width: 3.5em;
    background: #767676;
    position: relative;
    box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
}
.switch label {
    top: 50%;
    left: 7%;
    transform: translateY(-50%);
    height: 1.5em;
    width: 1.5em;
    background: #fff;
    position: absolute;
    cursor: pointer;
}
.switch div, .switch label {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
}
.switch input[type="checkbox"]:checked ~ div {
    background: #5caff5;
}
.switch input[type="checkbox"]:checked ~ div label {
    top: 50%;
    -webkit-transform: translate3d(100%, -50%, 0);
    -moz-transform: translate3d(100%, -50%, 0);
    transform: translate3d(100%, -50%, 0);
}

Vue

Vue.component('toggle', {
        name: "ToggleSwitch",
        props: ["checkvalue"],
        template: '#toggle',
        data() {
            return {
                checkValueIn: this.$props.checkValue
            }
        },
        methods: {
            sendValue() {
                this.$emit("get-toggle", this.checkValueIn);
            }
        },
        watch: {
            checkvalue: function (data) {
                this.checkValueIn = data;
            }
        }
    });
    
    new Vue({
    	el: "#app",
      data() {
      	return {
        	val1: false,
          val2: true
        }
      },
      methods: {
      	setVal1(value) {
        console.log(value)
                this.val1 = value;
            },
            setVal2(value) {
                this.val2 = value;
            }
      }
    })