Adds handler for kebab-case event for v-bind:sync; fix #6428

src/compiler/parser/index.js

@@ -5,7 +5,7 @@ import { parseHTML } from './html-parser'
 import { parseText } from './text-parser'
 import { parseFilters } from './filter-parser'
 import { genAssignmentCode } from '../directives/model'
-import { extend, cached, no, camelize } from 'shared/util'
+import { extend, cached, no, camelize, kebabize } from 'shared/util'
 import { isIE, isEdge, isServerRendering } from 'core/util/env'
 
 import {
@@ -512,7 +512,7 @@ function processComponent (el) {
 
 function processAttrs (el) {
   const list = el.attrsList
-  let i, l, name, rawName, value, modifiers, isProp
+  let i, l, name, rawName, value, modifiers, isProp, syncGen
   for (i = 0, l = list.length; i < l; i++) {
     name = rawName = list[i].name
     value = list[i].value
@@ -538,10 +538,16 @@ function processAttrs (el) {
             name = camelize(name)
           }
           if (modifiers.sync) {
+            syncGen = genAssignmentCode(value, `$event`)
+            addHandler(
+              el,
+              `update:${kebabize(name)}`,
+              syncGen
+            )
             addHandler(
               el,
               `update:${camelize(name)}`,
-              genAssignmentCode(value, `$event`)
+              syncGen
             )
           }
         }

src/shared/util.js

@@ -158,6 +158,14 @@ export const camelize = cached((str: string): string => {
   return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
 })
 
+/**
+ * Kebabize a camelCased string
+ */
+const kebabizeRE = /([a-z])([A-Z])/g
+export const kebabize = cached((str: string): string => {
+  return str.replace(kebabizeRE, (m, p1, p2) => `${p1}-${p2}`).toLowerCase()
+})
+
 /**
  * Capitalize a string.
  */

test/unit/features/directives/bind.spec.js

@@ -164,6 +164,27 @@ describe('Directive v-bind', () => {
     }).then(done)
   })
 
+  it('.sync modifier with kebab case event', done => {
+    const vm = new Vue({
+      template: `<test :foo-bar.sync="bar"/>`,
+      data: {
+        bar: 1
+      },
+      components: {
+        test: {
+          props: ['fooBar'],
+          template: `<div @click="$emit('update:foo-bar', 2)">{{ fooBar }}</div>`
+        }
+      }
+    }).$mount()
+
+    expect(vm.$el.textContent).toBe('1')
+    triggerEvent(vm.$el, 'click')
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('2')
+    }).then(done)
+  })
+
   it('bind object', done => {
     const vm = new Vue({
       template: '<input v-bind="test">',