s11e152 custom switch - not Nintendo! so cool

s11e143/src/App.vue

@@ -102,6 +102,11 @@
                     </select>
                 </div>
             </div>
+            <div class="row">
+                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
+                    <app-switch v-model="dataSwitched"></app-switch>
+                </div>
+            </div>
             <hr>
             <div class="row">
                 <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
@@ -110,6 +115,8 @@
                     </button>
                 </div>
             </div>
+
+
         </form>
         <hr>
         <div class="row">
@@ -131,6 +138,7 @@
                         </ul>
                         <p>Gender: {{userData.gender}}</p>
                         <p>Priority: {{selectedPriority}}</p>
+                        <p>Switched: {{dataSwitched}}</p>
                     </div>
                 </div>
             </div>
@@ -139,6 +147,8 @@
 </template>
 
 <script>
+    import Switch from './components/Switch.vue'
+
     export default {
         data(){
             return {
@@ -151,8 +161,12 @@
                 message: 'A new hope',
                 sendMail: [],
                 priorities: ['High', 'Medium', 'Low'],
-                selectedPriority: 'Medium'
+                selectedPriority: 'Medium',
+                dataSwitched: false
             };
+        },
+        components:{
+            appSwitch: Switch,
         }
     }
 </script>

s11e143/src/components/Switch.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div
+                id="on"
+                @click="switched(true)"
+                :class="{active: value}"
+            > On</div>
+        <div
+                id="off"
+                @click="switched(false)"
+                :class="{active: !value}"
+        > Off</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['value'],
+        methods: {
+            switched(value){
+                this.$emit('input', value)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    #on, #off {
+        width: 40px;
+        height: 20px;
+        background-color: lightgray;
+        padding: 2px;
+        display: inline-block;
+        margin: 10px -2px;
+        box-sizing: content-box;
+        cursor: pointer;
+        text-align:center;
+    }
+
+    #on:hover, #on.active{
+        background-color: lightgreen;
+    }
+    #off:hover, #off.active{
+        background-color: lightcoral;
+    }
+</style>