v-model assigner is cached

[jods4]

Version

3.0.0-alpha.11

Reproduction link

https://jsfiddle.net/an4cbzd9/4/

Steps to reproduce

This very specific and I know how to work around it but I'm reporting it anyway:
The assigner used by v-model is cached during onBeforeMount and not updated during onUpdate.
If you assign onUpdate:modelValue manually, it won't reflect changes.

Bonus bug: getModelAssigner doesn't expect an array (i.e. more than on listener under the key onUpdate:). It crashes if you register additional listeners.

Easiest fix seems to be not caching assign in onBeforeUpdate and call getModelAssigner in onUpdate. It currently doesn't do much anyway.

What is expected?

When you type in the textbox, an id is logged in console.
This id should change everytime you click on the button.

What is actually happening?

Id stays the same, even after clicking the button.

[yyx990803]

I don't really understand why you'd write code that is shown in the repro, but that's not how v-model is designed to be used. The vModelText directive is strictly internal and assumes compiler usage only. Note not everything exported on Vue is part of the public API.

[jods4]

Believe it or not, it came naturally while building a reusable component that wraps an <input>.
I believe it doesn't have to be that convoluted, though.

Problem 1, cached assign

For the cached assign problem, I'd like to ask you a question:
Are you supposed to be able to build a v-model from a render function?
Should I be able to do something like that in JS code (sorry not a JSX user here)?

function MyComp(props) {
 return <input v-model='props.model.name' />;
}

If yes, what would the code look like?
I'm pretty sure that code can be written in a way that exposes this issue.
If not, it's an unforunate limitation, isn't it?

Problem 2, multiple listeners

Documentation is very explicit about how v-model works, in particular that onUpdate:modelValue is the event that updates stuff.
Let's say you want to listen to this event to log the changes, like so:
https://jsfiddle.net/gb4q0j7p/4/
It fails with assign is not a function (the multiple listeners problem I mentionned in issue).

[yyx990803]

Yeah, this does expose a problem that can happen even in compiled usage. Although I still strongly suggest not relying on any of the internals / undocumented exports. They may break without notice in any release.

[jods4]

@yyx990803 what's the recommended way to write a renderer that creates a v-model?