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

feat(compiler-core): support v-model shorthand for key and value with the same name #13156

Open
wants to merge 2 commits into
base: minor
Choose a base branch
from

Conversation

L33Z22L11
Copy link

@L33Z22L11 L33Z22L11 commented Apr 3, 2025

Since Vue 3.4, v-bind supports a shorthand when the key and value share the same name, but v-model does not. This inconsistency makes template code less concise.

This PR introduces a shorthand for v-model, allowing developers to omit the value when the key and value are the same.

<template>
    <!-- before -->
    <OrderToggle
        v-model:is-ascending="isAscending"
        v-model:sort-order="sortOrder"
        v-model:category="category"
        :categories
    />

    <!-- after -->
    <OrderToggle
        v-model:is-ascending
        v-model:sort-order
        v-model:category
        :categories
    />
</template>

An argument-less, no-expression v-model (e.g., <input v-model> without binding variable) will still result in an error.

@L33Z22L11 L33Z22L11 marked this pull request as ready for review April 3, 2025 12:46
Copy link

github-actions bot commented Apr 3, 2025

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 100 kB 38.1 kB 34.4 kB
vue.global.prod.js 158 kB (+113 B) 58.3 kB (+29 B) 51.9 kB (-21 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 46.4 kB 18.2 kB 16.6 kB
createApp 54.4 kB 21.2 kB 19.4 kB
createSSRApp 58.6 kB 22.9 kB 20.9 kB
defineCustomElement 59.2 kB 22.7 kB 20.7 kB
overall 68.5 kB 26.4 kB 24 kB

Copy link

pkg-pr-new bot commented Apr 3, 2025

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-ssr

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

@vue/compiler-sfc

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: e9fa047

@edison1105 edison1105 changed the base branch from main to minor April 7, 2025 00:17
@edison1105 edison1105 changed the base branch from minor to main April 7, 2025 00:42
@edison1105 edison1105 changed the base branch from main to minor April 7, 2025 00:42
@edison1105
Copy link
Member

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Apr 7, 2025

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools failure success
pinia success success
nuxt success success
test-utils success success
router success success
vant success success
primevue success success
quasar success success
radix-vue success success
vue-macros success success
vitepress success success
vuetify success success
vite-plugin-vue success success
vue-simple-compiler success success
vue-i18n success success
vueuse success success

@edison1105
Copy link
Member

LGTM.
@L33Z22L11 Thanks.
I think we still need to update the documentation. https://vuejs.org/guide/essentials/template-syntax.html#same-name-shorthand

L33Z22L11 added a commit to L33Z22L11/vuejs-docs that referenced this pull request Apr 7, 2025
@edison1105 edison1105 added the ready for review This PR requires more reviews label Apr 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants