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).