Skip to content

defineModel with a backtick string causes duplicate model name "modelValue" #14621

@raldone01

Description

@raldone01

Vue version

3.5.30

Link to minimal reproduction

https://play.vuejs.org/#eNp9U01r3DAQ/SuDLtvCYidtT64TaEugKfSDpkcd1rVnHSXySEjjrY3xf+/Iy+aL7F6EZt574s0be1KfvM92PapClbEOxjNE5N5fajKdd4Hhi+s8bIPrYJXlqUj0laYy3/OFKQVj523FKBVAuWiK4UKrc62gGOXyTqtcwDJ/wlRrxbF2tDVtdhcdiYkp6bWq5QFjMfz0bBxFrQpYkIRV1rp/35Yehx7Xh359i/X9K/27OKSeVr8CRgw71OoB4yq0yHv46uYHDnJ/ADvX9FbYJ8DfGJ3tk8c97XNPjdh+wlvcXi9RGmr/xKuBkeJhqGQ0MeeFr5VEm7I7Nvqj3ffZh0WnaZYUD2t5uUWwFbUSPsszkneeS9iRYYALaHBrCL+7Bm1JffcXw+Wb1bBaw5SgqrdcwPnZGcxvPz4Kx2PC8YgwSeF6C47sKGoTQTbbITE24kLKKKMSC2hacgGbbFHcIHYR+LZiORCo6jCRyTF4U9+LWGbzwXkMdtR0eqrNsHnd3OmZNuMR2akPvzG75QLwFWXxME3DPMs5zrIpwfM94flfMP8Ha4MsvA==

Steps to reproduce

Simply define:

const x = defineModel<number>(`x`, { default: 100 });

Try to bind x. It won't even bind but no error is shown.

Also:

const x = defineModel<number>(`x`, { default: 100 });
const y = defineModel<number>(`y`, { default: 100 });

Results in a confusing error.

What is expected?

Backtick strings should be evaluated correctly or at least error.
I would suggest only accepting backtick strings without any templates inside.

What is actually happening?

Only one defineModel is ignored silently.
Two fail with a confusing error.

Any additional comments?

I use stylistic to default to backtick because then I don't have to change the ticks everytime I want to use string substitution later.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: sfc

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions