fix v-bind for enumerated attributes that expect true and false values (fix #2407)

Author: yyx990803

src/directives/public/bind.js

@@ -12,6 +12,9 @@ const disallowedInterpAttrRE = /^v-|^:|^@|^(?:is|transition|transition-mode|debo
 // these attributes should also set their corresponding properties
 // because they only affect the initial state of the element
 const attrWithPropsRE = /^(?:value|checked|selected|muted)$/
+// these attributes expect enumrated values of "true" or "false"
+// but are not boolean attributes
+const enumeratedAttrRE = /^(?:draggable|contenteditable|spellcheck)$/
 
 // these attributes should set a hidden property for
 // binding v-model to object values
@@ -126,7 +129,9 @@ export default {
       return
     }
     // update attribute
-    if (value != null && value !== false) {
+    if (enumeratedAttrRE.test(attr)) {
+      el.setAttribute(attr, value ? 'true' : 'false')
+    } else if (value != null && value !== false) {
       if (attr === 'class') {
         // handle edge case #1960:
         // class interpolation should not overwrite Vue transition class

test/unit/specs/directives/public/bind_spec.js

@@ -80,4 +80,14 @@ describe('v-bind', function () {
     dir.update('0 0 1500 1000')
     expect(dir.el.getAttribute('viewBox')).toBe('0 0 1500 1000')
   })
+
+  it('enumrated non-boolean attributes', function () {
+    ['draggable', 'contenteditable', 'spellcheck'].forEach(function (attr) {
+      dir.arg = attr
+      dir.update(true)
+      expect(el.getAttribute(attr)).toBe('true')
+      dir.update(false)
+      expect(el.getAttribute(attr)).toBe('false')
+    })
+  })
 })