Skip to content

Commit 6bc75ca

Browse files
STUkhyyx990803
STUkh
authored and
yyx990803
committed
fix(v-on): return handler value when using modifiers (#7704)
1 parent db58493 commit 6bc75ca

File tree

3 files changed

+107
-25
lines changed

3 files changed

+107
-25
lines changed

‎src/compiler/codegen/events.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,9 @@ function genHandler (
132132
code += genModifierCode
133133
}
134134
const handlerCode = isMethodPath
135-
? handler.value + '($event)'
135+
? `return ${handler.value}($event)`
136136
: isFunctionExpression
137-
? `(${handler.value})($event)`
137+
? `return (${handler.value})($event)`
138138
: handler.value
139139
/* istanbul ignore if */
140140
if (__WEEX__ && handler.params) {

‎test/unit/modules/compiler/codegen.spec.js

+68-23
Original file line numberDiff line numberDiff line change
@@ -269,120 +269,165 @@ describe('codegen', () => {
269269
)
270270
})
271271

272+
it('generate events with method call', () => {
273+
assertCodegen(
274+
'<input @input="onInput($event);">',
275+
`with(this){return _c('input',{on:{"input":function($event){onInput($event);}}})}`
276+
)
277+
// empty arguments
278+
assertCodegen(
279+
'<input @input="onInput();">',
280+
`with(this){return _c('input',{on:{"input":function($event){onInput();}}})}`
281+
)
282+
// without semicolon
283+
assertCodegen(
284+
'<input @input="onInput($event)">',
285+
`with(this){return _c('input',{on:{"input":function($event){onInput($event)}}})}`
286+
)
287+
// multiple args
288+
assertCodegen(
289+
'<input @input="onInput($event, \'abc\', 5);">',
290+
`with(this){return _c('input',{on:{"input":function($event){onInput($event, 'abc', 5);}}})}`
291+
)
292+
// expression in args
293+
assertCodegen(
294+
'<input @input="onInput($event, 2+2);">',
295+
`with(this){return _c('input',{on:{"input":function($event){onInput($event, 2+2);}}})}`
296+
)
297+
// tricky symbols in args
298+
assertCodegen(
299+
'<input @input="onInput(\');[\'());\');">',
300+
`with(this){return _c('input',{on:{"input":function($event){onInput(');[\'());');}}})}`
301+
)
302+
})
303+
304+
it('generate events with multiple statements', () => {
305+
// normal function
306+
assertCodegen(
307+
'<input @input="onInput1();onInput2()">',
308+
`with(this){return _c('input',{on:{"input":function($event){onInput1();onInput2()}}})}`
309+
)
310+
// function with multiple args
311+
assertCodegen(
312+
'<input @input="onInput1($event, \'text\');onInput2(\'text2\', $event)">',
313+
`with(this){return _c('input',{on:{"input":function($event){onInput1($event, 'text');onInput2('text2', $event)}}})}`
314+
)
315+
})
316+
272317
it('generate events with keycode', () => {
273318
assertCodegen(
274319
'<input @input.enter="onInput">',
275-
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;onInput($event)}}})}`
320+
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return onInput($event)}}})}`
276321
)
277322
// multiple keycodes (delete)
278323
assertCodegen(
279324
'<input @input.delete="onInput">',
280-
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete"]))return null;onInput($event)}}})}`
325+
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete"]))return null;return onInput($event)}}})}`
281326
)
282327
// multiple keycodes (chained)
283328
assertCodegen(
284329
'<input @keydown.enter.delete="onInput">',
285-
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter")&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete"]))return null;onInput($event)}}})}`
330+
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter")&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete"]))return null;return onInput($event)}}})}`
286331
)
287332
// number keycode
288333
assertCodegen(
289334
'<input @input.13="onInput">',
290-
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&$event.keyCode!==13)return null;onInput($event)}}})}`
335+
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&$event.keyCode!==13)return null;return onInput($event)}}})}`
291336
)
292337
// custom keycode
293338
assertCodegen(
294339
'<input @input.custom="onInput">',
295-
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"custom",undefined,$event.key,undefined))return null;onInput($event)}}})}`
340+
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"custom",undefined,$event.key,undefined))return null;return onInput($event)}}})}`
296341
)
297342
})
298343

299344
it('generate events with generic modifiers', () => {
300345
assertCodegen(
301346
'<input @input.stop="onInput">',
302-
`with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();onInput($event)}}})}`
347+
`with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();return onInput($event)}}})}`
303348
)
304349
assertCodegen(
305350
'<input @input.prevent="onInput">',
306-
`with(this){return _c('input',{on:{"input":function($event){$event.preventDefault();onInput($event)}}})}`
351+
`with(this){return _c('input',{on:{"input":function($event){$event.preventDefault();return onInput($event)}}})}`
307352
)
308353
assertCodegen(
309354
'<input @input.self="onInput">',
310-
`with(this){return _c('input',{on:{"input":function($event){if($event.target !== $event.currentTarget)return null;onInput($event)}}})}`
355+
`with(this){return _c('input',{on:{"input":function($event){if($event.target !== $event.currentTarget)return null;return onInput($event)}}})}`
311356
)
312357
})
313358

314359
// GitHub Issues #5146
315360
it('generate events with generic modifiers and keycode correct order', () => {
316361
assertCodegen(
317362
'<input @keydown.enter.prevent="onInput">',
318-
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.preventDefault();onInput($event)}}})}`
363+
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.preventDefault();return onInput($event)}}})}`
319364
)
320365

321366
assertCodegen(
322367
'<input @keydown.enter.stop="onInput">',
323-
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.stopPropagation();onInput($event)}}})}`
368+
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.stopPropagation();return onInput($event)}}})}`
324369
)
325370
})
326371

327372
it('generate events with mouse event modifiers', () => {
328373
assertCodegen(
329374
'<input @click.ctrl="onClick">',
330-
`with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;onClick($event)}}})}`
375+
`with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;return onClick($event)}}})}`
331376
)
332377
assertCodegen(
333378
'<input @click.shift="onClick">',
334-
`with(this){return _c('input',{on:{"click":function($event){if(!$event.shiftKey)return null;onClick($event)}}})}`
379+
`with(this){return _c('input',{on:{"click":function($event){if(!$event.shiftKey)return null;return onClick($event)}}})}`
335380
)
336381
assertCodegen(
337382
'<input @click.alt="onClick">',
338-
`with(this){return _c('input',{on:{"click":function($event){if(!$event.altKey)return null;onClick($event)}}})}`
383+
`with(this){return _c('input',{on:{"click":function($event){if(!$event.altKey)return null;return onClick($event)}}})}`
339384
)
340385
assertCodegen(
341386
'<input @click.meta="onClick">',
342-
`with(this){return _c('input',{on:{"click":function($event){if(!$event.metaKey)return null;onClick($event)}}})}`
387+
`with(this){return _c('input',{on:{"click":function($event){if(!$event.metaKey)return null;return onClick($event)}}})}`
343388
)
344389
assertCodegen(
345390
'<input @click.exact="onClick">',
346-
`with(this){return _c('input',{on:{"click":function($event){if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey)return null;onClick($event)}}})}`
391+
`with(this){return _c('input',{on:{"click":function($event){if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick($event)}}})}`
347392
)
348393
assertCodegen(
349394
'<input @click.ctrl.exact="onClick">',
350-
`with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;if($event.shiftKey||$event.altKey||$event.metaKey)return null;onClick($event)}}})}`
395+
`with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;if($event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick($event)}}})}`
351396
)
352397
})
353398

354399
it('generate events with multiple modifiers', () => {
355400
assertCodegen(
356401
'<input @input.stop.prevent.self="onInput">',
357-
`with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();$event.preventDefault();if($event.target !== $event.currentTarget)return null;onInput($event)}}})}`
402+
`with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();$event.preventDefault();if($event.target !== $event.currentTarget)return null;return onInput($event)}}})}`
358403
)
359404
})
360405

361406
it('generate events with capture modifier', () => {
362407
assertCodegen(
363408
'<input @input.capture="onInput">',
364-
`with(this){return _c('input',{on:{"!input":function($event){onInput($event)}}})}`
409+
`with(this){return _c('input',{on:{"!input":function($event){return onInput($event)}}})}`
365410
)
366411
})
367412

368413
it('generate events with once modifier', () => {
369414
assertCodegen(
370415
'<input @input.once="onInput">',
371-
`with(this){return _c('input',{on:{"~input":function($event){onInput($event)}}})}`
416+
`with(this){return _c('input',{on:{"~input":function($event){return onInput($event)}}})}`
372417
)
373418
})
374419

375420
it('generate events with capture and once modifier', () => {
376421
assertCodegen(
377422
'<input @input.capture.once="onInput">',
378-
`with(this){return _c('input',{on:{"~!input":function($event){onInput($event)}}})}`
423+
`with(this){return _c('input',{on:{"~!input":function($event){return onInput($event)}}})}`
379424
)
380425
})
381426

382427
it('generate events with once and capture modifier', () => {
383428
assertCodegen(
384429
'<input @input.once.capture="onInput">',
385-
`with(this){return _c('input',{on:{"~!input":function($event){onInput($event)}}})}`
430+
`with(this){return _c('input',{on:{"~!input":function($event){return onInput($event)}}})}`
386431
)
387432
})
388433

@@ -427,7 +472,7 @@ describe('codegen', () => {
427472
// with modifiers
428473
assertCodegen(
429474
`<input @keyup.enter="e=>current++">`,
430-
`with(this){return _c('input',{on:{"keyup":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;(e=>current++)($event)}}})}`
475+
`with(this){return _c('input',{on:{"keyup":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return (e=>current++)($event)}}})}`
431476
)
432477
})
433478

@@ -452,7 +497,7 @@ describe('codegen', () => {
452497
it('generate multiple event handlers', () => {
453498
assertCodegen(
454499
'<input @input="current++" @input.stop="onInput">',
455-
`with(this){return _c('input',{on:{"input":[function($event){current++},function($event){$event.stopPropagation();onInput($event)}]}})}`
500+
`with(this){return _c('input',{on:{"input":[function($event){current++},function($event){$event.stopPropagation();return onInput($event)}]}})}`
456501
)
457502
})
458503

‎test/unit/modules/vdom/patch/edge-cases.spec.js

+37
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,43 @@ describe('vdom patch: edge cases', () => {
2525
}).then(done)
2626
})
2727

28+
// exposed by #7705
29+
// methods and function expressions with modifiers should return result instead of undefined
30+
// skipped odd children[1,3, ...] because they are rendered as text nodes with undefined value
31+
it('should return listener\'s result for method name and function expression with and w/o modifiers', done => {
32+
const dummyEvt = { preventDefault: () => {} }
33+
new Vue({
34+
template: `
35+
<div v-test>
36+
<div @click="addFive"></div>
37+
<div @click.prevent="addFive"></div>
38+
<div @click="addFive($event, 5)"></div>
39+
<div @click.prevent="addFive($event, 5)"></div>
40+
</div>
41+
`,
42+
methods: {
43+
addFive ($event, toAdd = 0) {
44+
return toAdd + 5
45+
}
46+
},
47+
directives: {
48+
test: {
49+
bind (el, binding, vnode) {
50+
waitForUpdate(() => {
51+
expect(vnode.children[0].data.on.click()).toBe(5)
52+
}).then(() => {
53+
expect(vnode.children[2].data.on.click(dummyEvt)).toBe(5)
54+
}).then(() => {
55+
expect(vnode.children[4].data.on.click()).not.toBeDefined()
56+
}).then(() => {
57+
expect(vnode.children[6].data.on.click(dummyEvt)).not.toBeDefined()
58+
}).then(done)
59+
}
60+
}
61+
}
62+
}).$mount()
63+
})
64+
2865
// #3533
2966
// a static node is reused in createElm, which changes its elm reference
3067
// and is inserted into a different parent.

0 commit comments

Comments
 (0)