feat(v-bind): add support for kebab-case update events #8004

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, hyphenate } from 'shared/util'
 import { isIE, isEdge, isServerRendering } from 'core/util/env'
 
 import {
@@ -538,10 +538,16 @@ function processAttrs (el) {
             name = camelize(name)
           }
           if (modifiers.sync) {
+            const assignmentCode = genAssignmentCode(value, `$event`)
             addHandler(
               el,
               `update:${camelize(name)}`,
-              genAssignmentCode(value, `$event`)
+              assignmentCode
+            )
+            addHandler(
+              el,
+              `update:${hyphenate(name)}`,
+              assignmentCode
             )
           }
         }

src/core/instance/render-helpers/bind-object-props.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import config from 'core/config'
+import { hyphenate } from 'shared/util'
 
 import {
   warn,
@@ -48,9 +49,11 @@ export function bindObjectProps (
 
           if (isSync) {
             const on = data.on || (data.on = {})
-            on[`update:${key}`] = function ($event) {
+            const onUpdate = function ($event) {
               value[key] = $event
             }
+            on[`update:${key}`] = onUpdate
+            on[`update:${hyphenate(key)}`] = onUpdate
           }
         }
       }

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

@@ -143,7 +143,7 @@ describe('Directive v-bind', () => {
     expect(vm.$el.getAttribute('viewBox')).toBe('0 0 1 1')
   })
 
-  it('.sync modifier', done => {
+  it('.sync modifier: camelCase update event', done => {
     const vm = new Vue({
       template: `<test :foo-bar.sync="bar"/>`,
       data: {
@@ -164,6 +164,27 @@ describe('Directive v-bind', () => {
     }).then(done)
   })
 
+  it('.sync modifier: kebab-case update 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">',
@@ -187,7 +208,7 @@ describe('Directive v-bind', () => {
     }).then(done)
   })
 
-  it('.sync modifier with bind object', done => {
+  it('.sync modifier with bind object: camelCase update event', done => {
     const vm = new Vue({
       template: `<test v-bind.sync="test"/>`,
       data: {
@@ -217,6 +238,36 @@ describe('Directive v-bind', () => {
     }).then(done)
   })
 
+  it('.sync modifier with bind object: kebab-case update event', done => {
+    const vm = new Vue({
+      template: `<test v-bind.sync="test"/>`,
+      data: {
+        test: {
+          fooBar: 1
+        }
+      },
+      components: {
+        test: {
+          props: ['fooBar'],
+          template: `<div @click="handleUpdate">{{ fooBar }}</div>`,
+          methods: {
+            handleUpdate () {
+              this.$emit('update:foo-bar', 2)
+            }
+          }
+        }
+      }
+    }).$mount()
+    expect(vm.$el.textContent).toBe('1')
+    triggerEvent(vm.$el, 'click')
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('2')
+      vm.test.fooBar = 3
+    }).then(() => {
+      expect(vm.$el.textContent).toBe('3')
+    }).then(done)
+  })
+
   it('bind object with overwrite', done => {
     const vm = new Vue({
       template: '<input v-bind="test" id="foo" :class="test.value">',