Vue: functional component wrapping a native input control can't work correctly with v-model

[caikan]

Version

2.5.13

Reproduction link

https://jsfiddle.net/50wL7mdz/93119/

Steps to reproduce

Input abc in the 2nd text field.

What is expected?

Output: abc

What is actually happening?

Output: { "isTrusted": true }

---

Can we add a modifier native to v-model for resolving this issue, like @click.native?

Maybe we can add more modifiers for exact value transforming method, because sometimes I want to customize the behavior of text field like radio, checkbox and select.

[LinusBorg]

This doesn't work "automatically", correct. But neither does it work automatically for nrmoal components.

You have to set context.data.nativeOn.input to context.listeners.input yourself.

[shameleo]

@LinusBorg, I didn't really understand your answer. Could you provide complete working example please? I tried to implement v-model with functional component, and ended up with far more complex implementation than one assignment: https://jsfiddle.net/shameleo/zhahvvj3/

[fnlctrl]

Hi, thanks for filling this issue.

v-model works on input because vue's template compiler has special logic for it, that is, taking the .target.value out of the first argument of the input handler like what you'd manually do: value3 = $event.target.value.

v-model doesn't work for functional components in this case because the compiler couldn't know whether it should use fisrtArg or firstArg.target.value in the input handler, since it's impossible to know what the render function would return in runtime. Therefore, it always uses firstArg as default, that is, generating an input handler as firstArg => value = firstArg instead of firstArg => value = firstArg.target.value.

As such, the way to make it work is what @LinusBorg said, (though not entirely correct):

1. Add context.data.on.input (Native html elements doesn't use nativeOn, so it's just on here)
2. Manually call context.listeners.input with event.target.value

Vue.component('my-input', {
  functional: true,
  render(h, context) {
    context.data.on = {
      input: e => context.listeners.input(e.target.value)
    }
    return h('input', context.data);
  }
})

The demo: (/cc @shameleo )
https://jsfiddle.net/50wL7mdz/95253/

Closing as there's nothing vue can do about it (without putting great effort in trying to analyze arbitrary runtime behavior of manually written render functions 😂 )