[Bug] Event names with colons aren't handled.

[rbanks54]

Consider a component that supports v-model usage. It needs to provide two things for the syntactic sugar to work. A modelValue prop, and an update:modelValue event.

What I can't work out, is how to get the event binding working so that the update:modelValue event can be listened to in Angular. I think the colon in the event name is making a mess of things and I had a look at the ngvue source code, but I can't see where I'd potentially update things to fix it.

It's pretty easy to replicate this by changing the example applications to emit an update:description event instead of an update-description event. You'll see the vue devtools no longer showing the event binding

[jaredmcateer]

Unfortunately it's not possible with Angular's attribute normalization. It will take attributes like

• v-on-model-update
• v-on-model:update
• VOnModelUpdate
• v_on_model_update

and convert them to vOnModelUpdate

It's annoying but the workaround I've used in the past when I couldn't change the component I wanted to use is to create a thin vue component wrapper with a v-props-model / v-on-update pairing.

[rbanks54]

I wonder if we could do something in the vue app instance when it's created. Add a general listener/hook for events from the component, and if any events come through with a colon in the name, re-emit them for angular consumption using an angular compatible name. e.g. button:clicked -> ButtonClicked.

[jaredmcateer]

🤔 I don't think there is a way to catch all events from a component though. I've done a little searching around and there is no obvious solutions.

The best I've come up with is that ngVue would need to provide a separate directive for models like

• v-model="{ prop: model, update: handleUpdate }" -> :modelValue="model" / @update:modelValue="handleUpdate"
  or a custom prop name
• v-model-title="{ prop: model, update: handleUpdate }" -> :title="model" / @update:title="handleUpdate"

Though I would probably change v-model to something else to disassociate it from the standard Vue directive

[rbanks54]

I don't think there is a way to catch all events from a component though

The Vue devtools captures component events. I might have dig through the code to see what they do.

That said, I think the idea of a directive to make v-model work is a much better choice. It makes things explicit, eliminates the complexity of a generic event listener, and we only listen for the events we need. How about a directive name such as ng-v-model to make it obvious?

[jaredmcateer]

I think the dev tools have non-production internal hooks they can use to dig in but they are not present in production bundles.

I'm not a fan of ng-v-model because ng- is typically an angular built in namespace, ngv-model might work though. Actually kind of kicking myself I hadn't changed the directive to this when I rewrote the library.

I am currently working on a tight deadline with my regular job and then on vacation for December. Earliest I could start work on this is in January. If you're so inclined to work on it and post a PR I'd be able to make time to review it otherwise this will have to wait until I'm back.