From 77ef3836b1eeb7390fb6d5b1ffbc9674d316ee80 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Fri, 18 Nov 2016 16:32:00 +0800
Subject: [PATCH] Switch: fix @change timing bug

---
 packages/switch/src/component.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/switch/src/component.vue b/packages/switch/src/component.vue
index 49ab93f22..b5894dd07 100644
--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@@ -5,7 +5,7 @@
       class="el-switch__input"
       type="checkbox"
       @change="handleChange"
-      v-model="currentValue"
+      v-model="_value"
       :name="name"
       :disabled="disabled">
     <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
@@ -79,7 +79,6 @@
     },
     data() {
       return {
-        currentValue: this.value,
         coreWidth: this.width,
         buttonStyle: {
           transform: ''
@@ -90,18 +89,22 @@
       hasText() {
         /* istanbul ignore next */
         return this.onText || this.offText;
+      },
+      _value: {
+        get() {
+          return this.value;
+        },
+        set(val) {
+          this.$emit('input', val);
+        }
       }
     },
     watch: {
-      value(val) {
-        this.currentValue = val;
+      value() {
         if (this.onColor || this.offColor) {
-          this.handleCoreColor();
+          this.setBackgroundColor();
         }
         this.handleButtonTransform();
-      },
-      currentValue(val) {
-        this.$emit('input', val);
       }
     },
     methods: {
@@ -111,9 +114,10 @@
       handleButtonTransform() {
         this.buttonStyle.transform = this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
       },
-      handleCoreColor() {
-        this.$refs.core.style.borderColor = this.value ? this.onColor : this.offColor;
-        this.$refs.core.style.backgroundColor = this.value ? this.onColor : this.offColor;
+      setBackgroundColor() {
+        let newColor = this.value ? this.onColor : this.offColor;
+        this.$refs.core.style.borderColor = newColor;
+        this.$refs.core.style.backgroundColor = newColor;
       }
     },
     mounted() {
@@ -123,7 +127,7 @@
       }
       this.handleButtonTransform();
       if ((this.onColor || this.offColor) && !this.disabled) {
-        this.handleCoreColor();
+        this.setBackgroundColor();
       }
     }
   };