Fix for Vue3 - Now it works with Vue3 drewjbartlett#27

hasinhayder · Jan 16, 2021 · c93cf1a · c93cf1a
1 parent 52a19a1
commit c93cf1a
Showing 1 changed file with 6 additions and 7 deletions.
diff --git a/src/switches.vue b/src/switches.vue
@@ -6,7 +6,7 @@
             <span v-if="!label && !value" v-text="textDisabled"></span>
         </span>
 
-        <input type="checkbox" :disabled="disabled" @change="trigger" :checked="value" v-model="value">
+        <input type="checkbox" :disabled="disabled" @change="trigger" :checked="modelValue"  >
 
         <div></div>
     </label>
@@ -16,13 +16,12 @@
 
 export default {
     name: 'switches',
-
     props: {
         typeBold: {
             default: false
         },
 
-        value: {
+        modelValue:{
             default: false
         },
 
@@ -57,24 +56,24 @@ export default {
 
     mounted () {
         if(this.emitOnMount) {
-            this.$emit('input', this.value)
+            this.$emit('update:modelValue', this.modelValue)
         }
     },
 
     methods: {
         trigger (e) {
-            this.$emit('input', e.target.checked)
+            this.$emit('update:modelValue', e.target.checked)
         }
     },
 
     computed: {
         classObject () {
 
-            const { color, value, theme, typeBold, disabled } = this;
+            const { color, modelValue, theme, typeBold, disabled } = this;
 
             return {
                 'vue-switcher' : true,
-                ['vue-switcher--unchecked'] : !value,
+                ['vue-switcher--unchecked'] : !modelValue,
                 ['vue-switcher--disabled'] : disabled,
                 ['vue-switcher--bold']: typeBold,
                 ['vue-switcher--bold--unchecked']: typeBold && !value,