Remove old static style when applying style update (fix vuejs#4227) (vuejs#4235)

defcc · yyx990803 · commit 8f7c49c9ba76 · 2016-11-17T11:25:54.000-05:00
* both static style and stylebinding should be removed

* update test case

* update test case
diff --git a/src/platforms/web/runtime/modules/style.js b/src/platforms/web/runtime/modules/style.js
@@ -42,7 +42,12 @@ function updateStyle (oldVnode: VNodeWithData, vnode: VNodeWithData) {
 
   let cur, name
   const el: any = vnode.elm
-  const oldStyle: any = oldVnode.data.style || {}
+  const oldStaticStyle: any = oldVnode.data.staticStyle
+  const oldStyleBinding: any = oldVnode.data.style || {}
+
+  // if static style exists, stylebinding already merged into it when doing normalizeStyleData
+  const oldStyle = oldStaticStyle || oldStyleBinding
+
   const style = normalizeStyleBinding(vnode.data.style) || {}
 
   vnode.data.style = style.__ob__ ? extend({}, style) : style
diff --git a/test/unit/features/directives/style.spec.js b/test/unit/features/directives/style.spec.js
@@ -280,19 +280,28 @@ describe('Directive v-bind:style', () => {
 
   it('should not merge for different adjacent elements', (done) => {
     const vm = new Vue({
-      template: '<div>' +
-                  '<section style="color: blue" v-if="!bool"></section>' +
-                  '<div></div>' +
-                  '<section style="margin: 0" v-if="bool"></section>' +
-                '</div>',
+      template:
+        '<div>' +
+          '<section style="color: blue" :style="style" v-if="!bool"></section>' +
+          '<div></div>' +
+          '<section style="margin-top: 12px" v-if="bool"></section>' +
+        '</div>',
       data: {
-        bool: false
+        bool: false,
+        style: {
+          fontSize: '12px'
+        }
       }
     }).$mount()
+    const style = vm.$el.children[0].style
+    expect(style.fontSize).toBe('12px')
+    expect(style.color).toBe('blue')
     waitForUpdate(() => {
       vm.bool = true
     }).then(() => {
-      expect(vm.$el.children[1].style.color).not.toBe('blue')
+      expect(style.color).toBe('')
+      expect(style.fontSize).toBe('')
+      expect(style.marginTop).toBe('12px')
     }).then(done)
   })
 })
