[Regression from v2.2+] Returning an input element in render function fails two-way binding

[leonfu103]

Version

2.5.13

Reproduction link

https://codepen.io/leonfu103/pen/YevXbX

Steps to reproduce

Write a functional component with a render function that returns an input element, and a 'clear' button to clear the value of the input element

What is expected?

The two-way binding on the returned component should work as on the html input element.

What is actually happening?

If you click on the 'clear' button, it doesn't clear the value of the input element.

But if you use older version of Vue (older than V2.2.0, e.g V2.1.10) it works OK.

[posva]

You just forgot the prop value in your component 🙂

[JounQin]

@posva Do you mean add props: ['value']? It will warn about Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value".

And, change Vue to version 2.1.10 really works well without adding props: ['value'].

[posva]

Of course, they also need to remove the self.value = event.target.value 😄
They were not using v-model correctly

[leonfu103]

Then can you please update the document https://vuejs.org/v2/guide/render-function.html#v-model as I copied the code from there straight away @posva.

[posva]

Done! Don't forget you can also do it, it is a nice contribution 🙂