Skip to content

fix(vapor): v-model and v-model:model co-usage#13070

Merged
edison1105 merged 8 commits intovuejs:minorfrom
zhiyuanzmj:fix-define-model
Nov 6, 2025
Merged

fix(vapor): v-model and v-model:model co-usage#13070
edison1105 merged 8 commits intovuejs:minorfrom
zhiyuanzmj:fix-define-model

Conversation

@zhiyuanzmj
Copy link
Copy Markdown
Member

@zhiyuanzmj zhiyuanzmj commented Mar 19, 2025

When defineModel() and defineModel('model') co-usage, will got duplicated modifiers.
This is also effect Volar to infer modifiers type, so modelModifiers should be change to modelValueModifiers

REPL

image image

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 19, 2025

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13070

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13070

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13070

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13070

@vue/compiler-vapor

npm i https://pkg.pr.new/@vue/compiler-vapor@13070

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13070

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13070

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13070

@vue/runtime-vapor

npm i https://pkg.pr.new/@vue/runtime-vapor@13070

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13070

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13070

vue

npm i https://pkg.pr.new/vue@13070

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13070

commit: dd15262

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 19, 2025

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 84.9 kB (+73 B) 29.8 kB (+28 B) 26.3 kB (+8 B)
runtime-dom.global.prod.js 107 kB (+7 B) 40.2 kB (+7 B) 36.2 kB (+30 B)
vue.global.prod.js 165 kB (+9 B) 60.1 kB (+10 B) 53.5 kB (+44 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 47.9 kB (+13 B) 18.7 kB (+10 B) 17.1 kB (+14 B)
createApp 57 kB (+13 B) 21.9 kB (+11 B) 20 kB (+14 B)
createApp + vaporInteropPlugin 90.4 kB (+13 B) 33.8 kB (+9 B) 30.5 kB (-51 B)
createVaporApp 34 kB (+13 B) 13 kB (+8 B) 11.9 kB (+6 B)
createSSRApp 61.3 kB (+13 B) 23.7 kB (+9 B) 21.6 kB (+10 B)
defineCustomElement 62.6 kB (+13 B) 23.6 kB (+12 B) 21.5 kB
overall 72.1 kB (+13 B) 27.3 kB (+11 B) 24.9 kB (-1 B)

@edison1105 edison1105 added scope: vapor related to vapor mode ready to merge The PR is ready to be merged. 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. and removed scope: vapor related to vapor mode labels Mar 19, 2025
@zhiyuanzmj zhiyuanzmj changed the base branch from main to vapor March 20, 2025 02:36
@zhiyuanzmj zhiyuanzmj added the scope: vapor related to vapor mode label Mar 20, 2025
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jun 17, 2025

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Comment @coderabbitai help to get the list of available commands and usage tips.

@edison1105 edison1105 changed the title fix: use modelValueModifiers instead of modelModifiers fix(vapor): use modelValueModifiers instead of modelModifiers Jun 20, 2025
Copy link
Copy Markdown
Member

@yyx990803 yyx990803 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This edge case isn't worth the potential breakage, especially when the changes not only affect vapor but also vdom mode.

We can do something in reverse - special case when the model name is "model"

  1. generate the prop key as model$Modifiers
  2. in getModelModifiers, also special case it

Not as clean as aligning with modelValue, but it prevents any possible breakage.

@netlify
Copy link
Copy Markdown

netlify bot commented Jul 3, 2025

Deploy Preview for vapor-repl ready!

Name Link
🔨 Latest commit f3b3cbd
🔍 Latest deploy log https://app.netlify.com/projects/vapor-repl/deploys/6866b4eb259d510008c46c95
😎 Deploy Preview https://deploy-preview-13070--vapor-repl.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@zhiyuanzmj zhiyuanzmj changed the title fix(vapor): use modelValueModifiers instead of modelModifiers fix: v-model and v-model:model co-usage Jul 3, 2025
@zhiyuanzmj zhiyuanzmj changed the title fix: v-model and v-model:model co-usage fix(vapor): v-model and v-model:model co-usage Jul 3, 2025
@KazariEX
Copy link
Copy Markdown
Member

KazariEX commented Jul 3, 2025

So what if I define a model called model$?

@zhiyuanzmj
Copy link
Copy Markdown
Member Author

Only hope no one to do it 😔.

@yyx990803
Copy link
Copy Markdown
Member

So what if I define a model called model$?

Should be avoidable if using modelModifiers$ instead?

@KazariEX
Copy link
Copy Markdown
Member

KazariEX commented Jul 3, 2025

I think that adding more technical debt here is not ideal. This is where the complexity of the codebase starts to spiral. We should bear the cost of our past design mistakes. This modification even resulted in two locations where this feature behaved inconsistently.

@zhiyuanzmj
Copy link
Copy Markdown
Member Author

And the dynamic modelName also has problems.

@yyx990803
Copy link
Copy Markdown
Member

It's indeed a past design mistake so we have to absorb the complexity to avoid breaking changes.

Copy link
Copy Markdown
Member

@yyx990803 yyx990803 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems we can extract a shared function

// explain why this is needed and link to this PR
function getModifierPropName(key) {
  return `${key}Modifiers${key === 'model' ? '$' : ''}`
}

@zhiyuanzmj
Copy link
Copy Markdown
Member Author

Done.

@edison1105 edison1105 deleted the branch vuejs:minor July 7, 2025 00:06
@edison1105 edison1105 closed this Jul 7, 2025
@zhiyuanzmj zhiyuanzmj reopened this Jul 7, 2025
@zhiyuanzmj zhiyuanzmj changed the base branch from vapor to minor July 7, 2025 00:52
@edison1105 edison1105 moved this to Vapor in Next Minor Jul 16, 2025
@edison1105 edison1105 moved this from Vapor to In Progress in Next Minor Nov 5, 2025
@edison1105 edison1105 merged commit bf2d2b2 into vuejs:minor Nov 6, 2025
15 checks passed
@github-project-automation github-project-automation bot moved this from In Progress to Done in Next Minor Nov 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ready to merge The PR is ready to be merged. scope: vapor related to vapor mode

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

4 participants