Subscribe on changes!

Unclear/misleading rules for prop/event name conversion

avatar
Nov 27th 2022

Vue version

3.2.45

Link to minimal reproduction

https://kasheftin.github.io/vue3-prop-name-conversion/

Steps to reproduce

Here's the repo: https://github.com/Kasheftin/vue3-prop-name-conversion/blob/master/src/App.vue If an event is specified in kebab-case (like :on-some-event), it does not work.

What is expected?

The regular props in both vue2 and vue3 can be defined both in kebab case and in camel case, :some-prop works as well as :someProp. Prop name is auto converted to camel case. It's expected that an event, defined in a form of a prop, :on-some-event, should be auto converted to :onSomeEvent as well. But it does not happen.

What is actually happening?

if an event is defined in a form of a prop, :on-some-event, then it's not possible to trigger it using $emit('..anything..').

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 25.24 GB / 31.32 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 107.0
  npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

It's not a bug. It's more like a question - why this specific case is not auto converted. We know (from vue2) that listeners are not auto convered, that's why it was a surprise to discover that @some-event, @someEvent and even @SomeEvent - everything is working. It's natural to expect that an event, defined in a form of a prop, :on-some-event will inherit prop name conversion and it will be possible to trigger it, but it's not.