diff --git a/src/platforms/web/runtime/modules/style.js b/src/platforms/web/runtime/modules/style.js index 4d2d39dd6ea..402f76e1efb 100644 --- a/src/platforms/web/runtime/modules/style.js +++ b/src/platforms/web/runtime/modules/style.js @@ -1,6 +1,6 @@ /* @flow */ -import { getStyle, normalizeStyleBinding } from 'web/util/style' +import { getStyle, normalizeStyleBinding, parseStyleText } from 'web/util/style' import { cached, camelize, extend, isDef, isUndef, hyphenate } from 'shared/util' const cssVarRE = /^--/ @@ -44,7 +44,7 @@ const normalize = cached(function (prop) { } }) -function updateStyle (oldVnode: VNodeWithData, vnode: VNodeWithData) { +function updateStyle (oldVnode: VNodeWithData, vnode: VNodeWithData, creating: boolean = false) { const data = vnode.data const oldData = oldVnode.data @@ -60,7 +60,7 @@ function updateStyle (oldVnode: VNodeWithData, vnode: VNodeWithData) { const oldStyleBinding: any = oldData.normalizedStyle || oldData.style || {} // if static style exists, stylebinding already merged into it when doing normalizeStyleData - const oldStyle = oldStaticStyle || oldStyleBinding + let oldStyle = oldStaticStyle || oldStyleBinding const style = normalizeStyleBinding(vnode.data.style) || {} @@ -73,6 +73,10 @@ function updateStyle (oldVnode: VNodeWithData, vnode: VNodeWithData) { const newStyle = getStyle(vnode, true) + if (creating && el.style.cssText) { + oldStyle = parseStyleText(el.style.cssText) + } + for (name in oldStyle) { if (isUndef(newStyle[name])) { setProp(el, name, '') @@ -88,6 +92,6 @@ function updateStyle (oldVnode: VNodeWithData, vnode: VNodeWithData) { } export default { - create: updateStyle, + create: (oldVNode: VNodeWithData, vnode: VNodeWithData) => updateStyle(oldVNode, vnode, true), update: updateStyle } diff --git a/test/unit/modules/vdom/patch/hydration.spec.js b/test/unit/modules/vdom/patch/hydration.spec.js index 930ad47cc81..e82a22487d8 100644 --- a/test/unit/modules/vdom/patch/hydration.spec.js +++ b/test/unit/modules/vdom/patch/hydration.spec.js @@ -372,6 +372,19 @@ describe('vdom patch: hydration', () => { }).then(done) }) + it('should hydrate with correct inline styles', () => { + const dom = createMockSSRDOM('
') + + const vm = new Vue({ + data: { + style: { paddingLeft: '2px' } + }, + template: `
` + }).$mount(dom) + + expect(vm.$el.innerHTML).toBe('
') + }) + it('should properly initialize dynamic class bindings for future updates', done => { const dom = createMockSSRDOM('
')