Different behaviors of Arrow function and function

[zhangenming]

Version

2.6.8

Reproduction link

https://codepen.io/zhangenming/pen/GexZQK

Steps to reproduce

    <input :value="price" @input="e=>price=e.target.value">

Compiled:

    with(this){return _c('input',{domProps:{"value":price},on:{"input":e=>price=e.target.value}})}

    <input :value="price" @input="function f(e){price=e.target.value}">// this wont' be work

Compiled:

    with(this){return _c('input',{domProps:{"value":price},on:{"input":function($event){function f(e){price=e.target.value}}}})}

What is expected?

can be work

What is actually happening?

this wont' be work

[Justineo]

I helped re-formatted your issue and fixed a typo.

It seems that the template compiler is not generating correct code with function literals with a function name.

See the difference here.

[DanielDanaee]

Why would you expect this to work? directive values should be method names or methods only.

Have a look at the following part of the documentation:

https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

This is probably what you should be doing:

<input :value="price" @input="getTargetValue(e)">

getTargetValue(e){ return (this.price = e.target.value) }