Migrate v2 to v3: where has $vnode.data.model.expression gone?

Thanks for all your great work on Vue 3!

I am trying to migrate my Open Source project (metawidget.org) to Vue 3. An important feature is the component needs access to the original v-model expression text. So if the HTML tag says v-model=“foo.bar” I need the actual text “foo.bar”, rather than the object that foo.bar resolves to.

In Vue 2 my component was doing this.$vnode.data.model.expression

What is the equivalent now?

It’s not documented, and kind of a hack, but I just solved it like this:

For v-model="field_name"
In vue2: node.$vnode.data.model.expression
In vue3: node.$attrs['onUpdate:modelValue'].toString() returns $event => ((_ctx.field_name) = $event), so you can get your field_name from there.

Wow! Great find!

Do you think this rendering of ‘toString()’ would be browser (or JavaScript VM implementation)-specific?

Not sure… but seems to work in Chrome, Firefox and edge on Linux.

It might render differently a bit, but _ctx seems to be coming from Vue, so when looking for the default value, it should ways be /_ctx.(.?)\s)/.

It should be working until Vue renames that _ctx to something else, or browsers disable the function .toString() (normally used to debug stuff in console).