@@ -5,40 +5,40 @@ badges:
5
5
6
6
# ` v-model ` <MigrationBadges :badges =" $frontmatter.badges " />
7
7
8
- ## Overview
8
+ ## 概要
9
9
10
- In terms of what has changed, at a high level:
10
+ こちらが大まかな変更の概要です。
11
11
12
- - ** BREAKING :** When used on custom components, ` v-model ` prop and event default names are changed:
13
- - prop : ` value ` -> ` modelValue ` ;
14
- - event : ` input ` -> ` update:modelValue ` ;
15
- - ** BREAKING :** ` v-bind ` 's ` .sync ` modifier and component ` model ` option are removed and replaced with an argument on ` v-model ` ;
16
- - ** NEW :** Multiple ` v-model ` bindings on the same component are possible now;
17
- - ** NEW :** Added the ability to create custom ` v-model ` modifiers.
12
+ - ** 破壊的変更 :** カスタムコンポーネントで使用する場合に、 ` v-model ` のプロパティとイベントのデフォルト名が変更されます。
13
+ - プロパティ : ` value ` -> ` modelValue `
14
+ - イベント : ` input ` -> ` update:modelValue `
15
+ - ** 破壊的変更 :** ` v-bind ` の ` .sync ` 修飾子とコンポーネントの ` model ` オプションは削除され、 ` v-model ` の引数に置き換えられます。
16
+ - ** 追加 :** 同じコンポーネントに複数の ` v-model ` バインディングが可能になりました。
17
+ - ** 追加 :** カスタムの ` v-model ` 修飾子を作成する機能が追加されました。
18
18
19
- For more information, read on!
19
+ さらに詳しく知るために読み進めましょう!
20
20
21
- ## Introduction
21
+ ## はじめに
22
22
23
- When Vue 2.0 was released, the ` v-model ` directive required developers to always use the ` value ` prop. And if developers required different props for different purposes, they would have to resort to using ` v-bind.sync ` . In addition, this hard-coded relationship between ` v-model ` and ` value ` led to issues with how native elements and custom elements were handled.
23
+ Vue 2.0 がリリースされたとき、 ` v-model ` ディレクティブでは、常に ` value ` プロパティを使う必要がありました。また、異なる目的で複数のプロパティが必要な場合は、 ` v-bind.sync ` を使う必要がありました。さらに、この ` v-model ` と ` value ` のハードコードされた関係により、ネイティブ要素とカスタム要素の扱い方に問題が生じていました。
24
24
25
- In 2.2 we introduced the ` model ` component option that allows the component to customize the prop and event to use for ` v-model ` . However, this still only allowed a single ` v-model ` to be used on the component.
25
+ Vue 2.2 では、 ` model ` コンポーネントオプションが導入されました。これにより、コンポーネントが ` v-model ` で使用するプロパティ名とイベント名を変更できるようになりました。しかし、これでもコンポーネントで使えるのは1つの ` v-model ` だけでした。
26
26
27
- With Vue 3, the API for two-way data binding is being standardized in order to reduce confusion and to allow developers more flexibility with the ` v-model ` directive.
27
+ Vue 3 では、双方向データバインディングの API が標準化され、混乱を減らし、開発者が ` v-model ` ディレクティブをより柔軟に使えるようになりました。
28
28
29
- ## 2.x Syntax
29
+ ## 2.x での構文
30
30
31
- In 2.x, using a ` v-model ` on a component was an equivalent of passing a ` value ` prop and emitting an ` input ` event:
31
+ 2.x では、コンポーネントで ` v-model ` を使うことは、 ` value ` プロパティを渡して ` input ` イベントを発火することと同じでした。
32
32
33
33
``` html
34
34
<ChildComponent v-model =" pageTitle" />
35
35
36
- <!-- would be shorthand for: -->
36
+ <!-- これは下記の省略形です -->
37
37
38
38
<ChildComponent :value =" pageTitle" @input =" pageTitle = $event" />
39
39
```
40
40
41
- If we wanted to change prop or event names to something different, we would need to add a ` model ` option to ` ChildComponent ` component:
41
+ プロパティやイベント名を変更する場合は、 ` ChildComponent ` コンポーネントに ` model ` オプションを追加します。
42
42
43
43
``` html
44
44
<!-- ParentComponent.vue -->
@@ -55,9 +55,9 @@ export default {
55
55
event : ' change'
56
56
},
57
57
props: {
58
- // this allows using the `value` prop for a different purpose
58
+ // これにより、 `value` プロパティを別の目的に使えます
59
59
value: String ,
60
- // use `title` as the prop which take the place of `value`
60
+ // `value` の代わりに `title` をプロパティに使います
61
61
title: {
62
62
type: String ,
63
63
default: ' Default title'
@@ -66,67 +66,67 @@ export default {
66
66
}
67
67
```
68
68
69
- So, ` v-model ` in this case would be a shorthand to
69
+ したがって、この場合の ` v-model ` は下記の省略形になります。
70
70
71
71
``` html
72
72
<ChildComponent :title =" pageTitle" @change =" pageTitle = $event" />
73
73
```
74
74
75
- ### Using ` v-bind.sync `
75
+ ### ` v-bind.sync ` の使用について
76
76
77
- In some cases, we might need "two-way binding" for a prop (sometimes in addition to existing ` v-model ` for the different prop). To do so, we recommended emitting events in the pattern of ` update:myPropName ` . For example, for ` ChildComponent ` from the previous example with the ` title ` prop, we could communicate the intent of assigning a new value with:
77
+ 場合によっては、プロパティへの「双方向バインディング」が必要になります(時々、既存の ` v-model ` に加えて別のプロパティを使うために)。そのためには、 ` update:myPropName ` のパターンでのイベント発火をお勧めしていました。たとえば、 ` title ` プロパティを使用した前の例の ` ChildComponent ` の場合、新しい値に更新するイベントを次のように発火できました。
78
78
79
79
``` js
80
80
this .$emit (' update:title' , newValue)
81
81
```
82
82
83
- Then the parent could listen to that event and update a local data property, if it wants to. For example:
83
+ そうすると、親はそのイベントをリッスンしてローカルのデータプロパティを更新できました。例えば、以下のようになります。
84
84
85
85
``` html
86
86
<ChildComponent :title =" pageTitle" @update:title =" pageTitle = $event" />
87
87
```
88
88
89
- For convenience, we had a shorthand for this pattern with the .sync modifier:
89
+ 便宜上、このパターンには ' .sync' 修飾子による省略記法がありました。
90
90
91
91
``` html
92
92
<ChildComponent :title.sync =" pageTitle" />
93
93
```
94
94
95
- ## 3.x Syntax
95
+ ## 3.x での構文
96
96
97
- In 3.x ` v-model ` on the custom component is an equivalent of passing a ` modelValue ` prop and emitting an ` update:modelValue ` event:
97
+ 3.x では、カスタムコンポーネント上の ` v-model ` は ` modelValue ` プロパティを渡して ` update:modelValue ` イベントを発火するのと同じです。
98
98
99
99
``` html
100
100
<ChildComponent v-model =" pageTitle" />
101
101
102
- <!-- would be shorthand for: -->
102
+ <!-- これは下記の省略形です -->
103
103
104
104
<ChildComponent
105
105
:modelValue =" pageTitle"
106
106
@update:modelValue =" pageTitle = $event"
107
107
/>
108
108
```
109
109
110
- ### ` v-model ` arguments
110
+ ### ` v-model ` の引数
111
111
112
- To change a model name, instead of a ` model ` component option, now we can pass an _ argument _ to ` v-model ` :
112
+ モデル名を変更するための ` model ` コンポーネントオプションの代わりに、今は ` v-model ` に 引数 を渡せるようになりました。
113
113
114
114
``` html
115
115
<ChildComponent v-model:title =" pageTitle" />
116
116
117
- <!-- would be shorthand for: -->
117
+ <!-- これは下記の省略形です -->
118
118
119
119
<ChildComponent :title =" pageTitle" @update:title =" pageTitle = $event" />
120
120
```
121
121
122
122
![ v-bind anatomy] ( /images/v-bind-instead-of-sync.png )
123
123
124
- This also serves as a replacement to ` .sync ` modifier and allows us to have multiple ` v-model ` s on the custom component.
124
+ これは ` .sync ` 修飾子の代わりとしても機能し、カスタムコンポーネントに複数の ` v-model ` を含めることができます。
125
125
126
126
``` html
127
127
<ChildComponent v-model:title =" pageTitle" v-model:content =" pageContent" />
128
128
129
- <!-- would be shorthand for: -->
129
+ <!-- これは下記の省略形です -->
130
130
131
131
<ChildComponent
132
132
:title =" pageTitle"
@@ -136,31 +136,31 @@ This also serves as a replacement to `.sync` modifier and allows us to have mult
136
136
/>
137
137
```
138
138
139
- ### ` v-model ` modifiers
139
+ ### ` v-model ` 修飾子
140
140
141
- In addition to 2.x hard-coded ` v-model ` modifiers like ` .trim ` , now 3.x supports custom modifiers:
141
+ 2.x でのハードコードされた ` .trim ` のような ` v-model ` 修飾子に加えて、 3.x ではカスタム修飾子をサポートしています。
142
142
143
143
``` html
144
144
<ChildComponent v-model.capitalize =" pageTitle" />
145
145
```
146
146
147
- Read more about custom ` v-model ` modifiers in the [ Custom Events ] ( ../component-custom-events.html#handling- v-model-modifiers ) section.
147
+ カスタム ` v-model ` 修飾子の詳細は、 [ ` v-model ` 修飾子の処理 ] ( ../component-custom-events.html#v-model-修飾子の処理 ) の章を参照してください。
148
148
149
- ## Migration Strategy
149
+ ## 移行の戦略
150
150
151
- We recommend:
151
+ 以下をお勧めします。
152
152
153
- - checking your codebase for ` .sync ` usage and replace it with ` v-model ` :
153
+ - コードベースに ` .sync ` を使用しているかチェックして、 ` v-model ` に置き換えてください。
154
154
155
155
``` html
156
156
<ChildComponent :title.sync =" pageTitle" />
157
157
158
- <!-- to be replaced with -->
158
+ <!-- 以下に置き換えましょう -->
159
159
160
160
<ChildComponent v-model:title =" pageTitle" />
161
161
```
162
162
163
- - for all ` v-model ` s without arguments, make sure to change props and events name to ` modelValue ` and ` update:modelValue ` respectively
163
+ - 引数のないすべての ` v-model ` について、プロパティとイベントの名前をそれぞれ ` modelValue ` と ` update:modelValue ` に置き換えてください。
164
164
165
165
``` html
166
166
<ChildComponent v-model =" pageTitle" />
@@ -171,20 +171,20 @@ We recommend:
171
171
172
172
export default {
173
173
props: {
174
- modelValue: String // previously was `value: String`
174
+ modelValue: String // 以前は `value:String` でした
175
175
},
176
176
methods: {
177
177
changePageTitle (title ) {
178
- this .$emit (' update:modelValue' , title) // previously was `this.$emit('input', title)`
178
+ this .$emit (' update:modelValue' , title) // 以前は `this.$emit('input', title)` でした
179
179
}
180
180
}
181
181
}
182
182
```
183
183
184
- ## Next Steps
184
+ ## 次のステップ
185
185
186
- For more information on the new ` v-model ` syntax, see:
186
+ 新しい ` v-model ` 構文の詳細については、以下を参照してください。
187
187
188
- - [ Using ` v-model ` on Components ] ( ../component-basics.html#using -v-model-on-components )
189
- - [ ` v-model ` arguments ] ( ../component-custom-events.html#v-model-arguments )
190
- - [ Handling ` v-model ` modifiers ] ( ../component-custom-events.html#v-model-arguments )
188
+ - [ コンポーネントで ` v-model ` を使う ] ( ../component-basics.html#コンポーネントで -v-model-を使う )
189
+ - [ ` v-model ` の引数 ] ( ../component-custom-events.html#v-model-の引数 )
190
+ - [ ` v-model ` 修飾子の処理 ] ( ../component-custom-events.html#v-model-修飾子の処理 )
0 commit comments