Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript error: required named v-model props passed in camelCase but expected in kebab-case #12532

Open
benwiley4000 opened this issue Dec 11, 2024 · 0 comments

Comments

@benwiley4000
Copy link

benwiley4000 commented Dec 11, 2024

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqVUl1PwjAU/StNX9AERhB9QTABwoMmfkR9bGLGdoFiaWvbIWbZf/e2kw0ETHzaes69t+eenpwOtY7WGdAe7TtYaRE7uGGSkH6y4CJtJWqllQTpyLq1UimInjZKg3FfrXjAqIHZkNFDblpyI+TaOK7f3pmNR5sYrh2x4DJNRCznWO4so8hyvM84khNsJwWZGbUiDRTYuK64sVc2roSVJVH7l2C/lW9iMlHSOj9vSAb+c9Y5R7xCRz/ohUf77VIbKqFN1IRVMz6PllZJtCj3zjDq7+ACzKN2HKcw2iOB8VwshPq8C5gzGTS3eLKA5P0IvrQbjzH6ZMCCWQOjFediMwdX0pOXB9jgf0Wi45nA6j/IZ7BKZF5jWTbKZIqyd+qC2ttgK5fzVzvZOJB2u9SeUOsMT4IYD3u0CByjaLR/jVOO1Ft0o8vQx2SB5h55r4MU5jnZZmpICmzcg0YB+ke4yjevJw5ICjMu4d6n96xRR7vRDAn8yLiBtNyYFHVqagGnJkxPTthP2NsajPcbN+9GV1GnS4tvs5I37Q==

Steps to reproduce

I'm not sure why in the linked project I don't have any type errors, but I get them locally when running the same code example. If you have a named defineModel with required: true and try to pass it via kebab case to the child component, typescript complains that property-a isn't being passed. It does say that propertyA is being passed. I noticed that only the v-model props are being expected in kebab-case, the others are expected in camelcase.

I was also having additional runtime problems with kebab casing, but these were resolved in version 3.5.12. It seems the typescript issue is a lingering problem.

Capture d’écran 2024-12-11 153229

What is expected?

I called defineModel with the string property-a and I expect to be able to pass v-model:property-a.

What is actually happening?

Vue 3's compiler is turning v-model:property-a into the prop propertyA but the child component type is expecting property-a. The expected prop names for other declared props are all camel-cased.

System Info

System:
    OS: Windows 10 10.0.26100
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
    Memory: 6.28 GB / 31.46 GB
  Binaries:
    Node: 18.20.3 - ~\AppData\Local\fnm_multishells\56372_1733949521473\node.EXE
    npm: 10.7.0 - ~\AppData\Local\fnm_multishells\56372_1733949521473\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.48)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

One workaround is @vue-ignore, another is to only use single-word v-model names.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants