fix(v-model/emit): update:camelCase events should trigger kebab case equivalent

close #656

diff --git a/packages/runtime-core/__tests__/component.spec.ts b/packages/runtime-core/__tests__/component.spec.ts
index 848509af8c75381eb500841a2dc7da76dc881980..bf9377e1b99cd8ec7c5d6b4aa5178cd9a88fcfb2 100644 (file)
--- a/packages/runtime-core/__tests__/component.spec.ts
+++ b/packages/runtime-core/__tests__/component.spec.ts
@@ -78,7 +78,9 @@ describe('renderer: component', () => {
       setup() {
         return () =>
           h(Child, {
+            // emit triggering single handler
             onBar: () => 1,
+            // emit triggering multiple handlers
             onBaz: [() => Promise.resolve(2), () => Promise.resolve(3)]
           })
       }
@@ -86,8 +88,32 @@ describe('renderer: component', () => {
 
     render(h(App), nodeOps.createElement('div'))
 
+    // assert return values from emit
     expect(noMatchEmitResult).toMatchObject([])
     expect(singleEmitResult).toMatchObject([1])
     expect(await Promise.all(multiEmitResult)).toMatchObject([2, 3])
   })
+
+  // for v-model:foo-bar usage in DOM templates
+  test('emit update:xxx events should trigger kebab-case equivalent', () => {
+    const Child = defineComponent({
+      setup(_, { emit }) {
+        emit('update:fooBar', 1)
+        return () => h('div')
+      }
+    })
+
+    const handler = jest.fn()
+    const App = {
+      setup() {
+        return () =>
+          h(Child, {
+            'onUpdate:foo-bar': handler
+          })
+      }
+    }
+
+    render(h(App), nodeOps.createElement('div'))
+    expect(handler).toHaveBeenCalled()
+  })
 })

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 9bfaf50b0015d5f42d8c1e947845fe9d06aac0b5..b46d10ab550c1bdeb64ac09159da3dd5d6355451 100644 (file)
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -25,7 +25,8 @@ import {
   NO,
   makeMap,
   isPromise,
-  isArray
+  isArray,
+  hyphenate
 } from '@vue/shared'
 import { SuspenseBoundary } from './components/Suspense'
 import { CompilerOptions } from '@vue/compiler-core'
@@ -221,7 +222,11 @@ export function defineComponentInstance(
 
     emit: (event, ...args): any[] => {
       const props = instance.vnode.props || EMPTY_OBJ
-      const handler = props[`on${event}`] || props[`on${capitalize(event)}`]
+      let handler = props[`on${event}`] || props[`on${capitalize(event)}`]
+      if (!handler && event.indexOf('update:') === 0) {
+        event = hyphenate(event)
+        handler = props[`on${event}`] || props[`on${capitalize(event)}`]
+      }
       if (handler) {
         const res = callWithAsyncErrorHandling(
           handler,