You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/guide/forms.md
+11-9
Original file line number
Diff line number
Diff line change
@@ -8,14 +8,14 @@ order: 10
8
8
9
9
You can use the `v-model` directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
10
10
11
-
<pclass="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>
11
+
<pclass="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>
12
12
13
13
`v-model` internally uses different properties and emits different events for different input elements:
14
14
- text and textarea elements use `value` property and `input` event;
15
15
- checkboxes and radiobuttons use `checked` property and `change` event;
16
16
- select fields use `value` as a prop and `change` as an event.
17
17
18
-
<pclass="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>
18
+
<pclass="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 to these updates as well, use the `input` event instead.</p>
19
19
20
20
### Text
21
21
@@ -209,7 +209,7 @@ new Vue({
209
209
</script>
210
210
{% endraw %}
211
211
212
-
<pclass="tip">If the initial value of your `v-model` expression does not match any of the options, the `<select>` element will render in an "unselected" state. On iOS this will cause the user not being able to select the first item because iOS does not fire a change event in this case. It is therefore recommended to provide a disabled option with an empty value, as demonstrated in the example above.</p>
212
+
<pclass="tip">If the initial value of your `v-model` expression does not match any of the options, the `<select>` element will render in an "unselected" state. On iOS, this will prevent the user from being able to select the first item, because iOS does not fire a `change` event in this case. It is therefore recommended to provide a `disabled` option with an empty value, as demonstrated in the example above.</p>
213
213
214
214
Multiple select (bound to Array):
215
215
@@ -291,7 +291,7 @@ new Vue({
291
291
292
292
## Value Bindings
293
293
294
-
For radio, checkbox and select options, the `v-model` binding values are usually static strings (or booleans for checkbox):
294
+
For radio, checkbox and select options, the `v-model` binding values are usually static strings (or booleans for checkboxes):
295
295
296
296
```html
297
297
<!-- `picked` is a string "a" when checked -->
@@ -306,7 +306,7 @@ For radio, checkbox and select options, the `v-model` binding values are usually
306
306
</select>
307
307
```
308
308
309
-
But sometimes we may want to bind the value to a dynamic property on the Vue instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values.
309
+
But sometimes, we may want to bind the value to a dynamic property on the Vue instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values.
310
310
311
311
### Checkbox
312
312
@@ -326,7 +326,7 @@ vm.toggle === 'yes'
326
326
vm.toggle==='no'
327
327
```
328
328
329
-
<pclass="tip">The `true-value` and `false-value` attributes don't affect the input's `value` attribute, because browsers don't include unchecked boxes in form submissions. To guarantee that one of two values is submitted in a form (e.g. "yes" or "no"), use radio inputs instead.</p>
329
+
<pclass="tip">The `true-value` and `false-value` attributes don't affect the input's `value` attribute, because browsers don't include unchecked boxes in form submissions. To guarantee that one of two values is submitted in a form (i.e. "yes" or "no"), use radio inputs instead.</p>
330
330
331
331
### Radio
332
332
@@ -358,7 +358,7 @@ vm.selected.number // => 123
358
358
359
359
### `.lazy`
360
360
361
-
By default, `v-model` syncs the input with the data after each `input` event (with the exception of IME composition as [stated above](#vmodel-ime-tip)). You can add the `lazy` modifier to instead sync after`change` events:
361
+
By default, `v-model` syncs the input with the data after each `input` event (with the exception of IME composition, as [stated above](#vmodel-ime-tip)). You can add the `lazy` modifier to instead sync _after_`change` events:
362
362
363
363
```html
364
364
<!-- synced after "change" instead of "input" -->
@@ -367,7 +367,7 @@ By default, `v-model` syncs the input with the data after each `input` event (wi
367
367
368
368
### `.number`
369
369
370
-
If you want user input to be automatically typecast as a number, you can add the `number` modifier to your `v-model` managed inputs:
370
+
If you want user input to be automatically typecast as a Number, you can add the `number` modifier to your `v-model` managed inputs:
371
371
372
372
```html
373
373
<inputv-model.number="age"type="number">
@@ -387,4 +387,6 @@ If you want whitespace from user input to be trimmed automatically, you can add
387
387
388
388
> If you're not yet familiar with Vue's components, you can skip this for now.
389
389
390
-
HTML's built-in input types won't always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with `v-model`! To learn more, read about [custom inputs](components.html#Using-v-model-on-Components) in the Components guide.
390
+
HTML's built-in input types won't always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with `v-model`!
391
+
392
+
To learn more, read about [custom inputs](components.html#Using-v-model-on-Components) in the Components guide.
0 commit comments