diff --git a/src/guide/forms.md b/src/guide/forms.md index a4531a61..30b1d7da 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -1,25 +1,25 @@ -# Form Input Bindings +# フォーム入力バインディング -## Basic Usage +## 基本的な使い方 -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. +form の input 要素や textarea 要素、 select 要素に双方向データバインディングを付与するためには、`v-model`を使用することができます。`v-model`は、要素を更新する適切な方法を入力の種類に基づき自動的に選択します。少し魔法のようですが、本来`v-model`は糖衣構文(syntax sugar)であり、ユーザの入力イベントに応じてデータを更新し、さらにエッジケースに対する特別な配慮をしてくれます。 -::: tip Note -`v-model` will ignore the initial `value`, `checked` or `selected` attributes found on any form elements. It will always treat the current active instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the `data` option of your component. +::: tip +`v-model` はフォーム要素の`value`属性や`checked`属性、`selected`属性の初期値を無視します。`v-model`は常に、現在アクティブなインスタンスの`data`を信頼できる情報源として扱います。初期値の宣言はJavaScript側、コンポーネントの`data`オプション内で行ってください。 ::: -`v-model` internally uses different properties and emits different events for different input elements: +内部的には、`v-model`は異なる input 要素に対し異なるプロパティを使用し、異なるイベントを送出します。 -- text and textarea elements use `value` property and `input` event; -- checkboxes and radiobuttons use `checked` property and `change` event; -- select fields use `value` as a prop and `change` as an event. +- text および textarea 要素には、`value`プロパティと`input`イベントを用います +- チェックボックスおよびラジオボタンには、`checked`プロパティと`change`イベントを用います +- select フィールドには、`value`プロパティと`change`イベントを用います ::: tip Note -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. +[IME](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89) を必要とする言語 (中国語、日本語、韓国語など) においては、IME による入力中に`v-model`が更新を行わないことに気づくでしょう。このような入力に対しても同様に扱いたい場合は、代わりに`input` イベントを使用してください。 ::: -### Text +### テキスト ```html @@ -33,7 +33,7 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method)
-### Multiline text +### 複数行テキスト ```html Multiline message is: @@ -49,7 +49,7 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) -Interpolation on textareas won't work. Use `v-model` instead. +textarea への挿入は機能しません。代わりに`v-model`を用いてください。 ```html @@ -59,9 +59,9 @@ Interpolation on textareas won't work. Use `v-model` instead. ``` -### Checkbox +### チェックボックス -Single checkbox, boolean value: +単一のチェックボックスと boolean 値: ```html @@ -75,7 +75,7 @@ Single checkbox, boolean value: -Multiple checkboxes, bound to the same Array: +同じ配列にバインドされた複数のチェックボックス: ```html