Skip to content

Commit 27c7ed1

Browse files
NataliaTepluhinasdras
authored andcommitted
Clarified v-model props/events for native elements (#1974)
* Added details for v-model Explained what events and properties v-model for different input elements * fix: refactored tip to bullet points
1 parent bfe2649 commit 27c7ed1

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

src/v2/guide/forms.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ You can use the `v-model` directive to create two-way data bindings on form inpu
1010

1111
<p class="tip">`v-model` will ignore the initial `value`, `checked` or `selected` attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the `data` option of your component.</p>
1212

13+
`v-model` internally uses different properties and emits different events for different input elements:
14+
- text and textarea elements use `value` property and `input` event;
15+
- checkboxes and radiobuttons use `checked` property and `change` event;
16+
- select fields use `value` as a prop and `change` as an event.
17+
1318
<p class="tip" id="vmodel-ime-tip">For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead.</p>
1419

1520
### Text

0 commit comments

Comments
 (0)