fix: fix v-bind:style for camelCase properties with !important (#9386)

vuejs · Jan 31, 2019 · 539e481 · 539e481
1 parent e1db2c5
commit 539e481
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/platforms/web/runtime/modules/style.js b/src/platforms/web/runtime/modules/style.js
@@ -1,7 +1,7 @@
 /* @flow */
 
 import { getStyle, normalizeStyleBinding } from 'web/util/style'
-import { cached, camelize, extend, isDef, isUndef } from 'shared/util'
+import { cached, camelize, extend, isDef, isUndef, hyphenate } from 'shared/util'
 
 const cssVarRE = /^--/
 const importantRE = /\s*!important$/
@@ -10,7 +10,7 @@ const setProp = (el, name, val) => {
   if (cssVarRE.test(name)) {
     el.style.setProperty(name, val)
   } else if (importantRE.test(val)) {
-    el.style.setProperty(name, val.replace(importantRE, ''), 'important')
+    el.style.setProperty(hyphenate(name), val.replace(importantRE, ''), 'important')
   } else {
     const normalizedName = normalize(name)
     if (Array.isArray(val)) {

diff --git a/test/unit/features/directives/style.spec.js b/test/unit/features/directives/style.spec.js
@@ -101,6 +101,13 @@ describe('Directive v-bind:style', () => {
     }).then(done)
   })
 
+  it('camelCase with !important', done => {
+    vm.styles = { zIndex: '100 !important' }
+    waitForUpdate(() => {
+      expect(vm.$el.style.getPropertyPriority('z-index')).toBe('important')
+    }).then(done)
+  })
+
   it('object with multiple entries', done => {
     vm.$el.style.color = 'red'
     vm.styles = {