Skip to content

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

Closed
vuejs/language-tools
#5213
@benwiley4000

Description

@benwiley4000

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions