Skip to content

Commit

Permalink
fix(v-model/emit): update:camelCase events should trigger kebab case …
Browse files Browse the repository at this point in the history
…equivalent

close #656
  • Loading branch information
yyx990803 committed Jan 26, 2020
1 parent 48152bc commit 2837ce8
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 2 deletions.
26 changes: 26 additions & 0 deletions packages/runtime-core/__tests__/component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,42 @@ describe('renderer: component', () => {
setup() {
return () =>
h(Child, {
// emit triggering single handler
onBar: () => 1,
// emit triggering multiple handlers
onBaz: [() => Promise.resolve(2), () => Promise.resolve(3)]
})
}
}

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()
})
})
9 changes: 7 additions & 2 deletions packages/runtime-core/src/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 2837ce8

Please sign in to comment.