Skip to content

Commit 3446976

Browse files
committed
docs(v-model): same-name shorthand usage
vuejs/core#13156
1 parent b70003e commit 3446976

File tree

2 files changed

+27
-2
lines changed

2 files changed

+27
-2
lines changed

Diff for: src/api/built-in-directives.md

+21
Original file line numberDiff line numberDiff line change
@@ -358,12 +358,33 @@ Create a two-way binding on a form input element or a component.
358358
- `<textarea>`
359359
- components
360360

361+
- **Shorthand:**
362+
- Omitting value (when argument and bound variable have the same name, requires 3.6+)
363+
361364
- **Modifiers**
362365

363366
- [`.lazy`](/guide/essentials/forms#lazy) - listen to `change` events instead of `input`
364367
- [`.number`](/guide/essentials/forms#number) - cast valid input string to numbers
365368
- [`.trim`](/guide/essentials/forms#trim) - trim input
366369

370+
- **Example**
371+
372+
```vue-html
373+
<!-- form elements -->
374+
<input v-model="text" />
375+
<select v-model="option" />
376+
<textarea v-model="message" />
377+
378+
<!-- component bindings -->
379+
<MyComponent v-model="value" />
380+
<MyComponent v-model:checked="checked" />
381+
382+
<!-- same-name shorthand (3.6+) -->
383+
<MyComponent v-model:checked />
384+
```
385+
386+
The shorthand only works when the bound variable has the same name as the argument. It cannot be used without an argument or when no binding expression is provided (e.g., `<input v-model>` will still result in an error).
387+
367388
- **See also**
368389

369390
- [Form Input Bindings](/guide/essentials/forms)

Diff for: src/guide/essentials/template-syntax.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@ Attributes that start with `:` may look a bit different from normal HTML, but it
6666
6767
### Same-name Shorthand {#same-name-shorthand}
6868

69-
- Only supported in 3.4+
69+
- `v-bind`: Supported since 3.4
70+
- `v-model`: Supported since 3.6
7071

7172
If the attribute has the same name with the JavaScript value being bound, the syntax can be further shortened to omit the attribute value:
7273

@@ -76,9 +77,12 @@ If the attribute has the same name with the JavaScript value being bound, the sy
7677
7778
<!-- this also works -->
7879
<div v-bind:id></div>
80+
81+
<!-- same as v-model:foo="foo" -->
82+
<input v-model:foo>
7983
```
8084

81-
This is similar to the property shorthand syntax when declaring objects in JavaScript. Note this is a feature that is only available in Vue 3.4 and above.
85+
This works similarly to JavaScript’s object property shorthand and helps keep templates concise. Note `v-model` without an argument or bound expression (e.g., `<input v-model>`) is still invalid.
8286

8387
### Boolean Attributes {#boolean-attributes}
8488

0 commit comments

Comments
 (0)