Skip to content

Commit eb9f860

Browse files
fix: added how to migrate to v-model
1 parent c7af027 commit eb9f860

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

src/guide/migration/v-model.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,41 @@ In addition to v2 hard-coded `v-model` modifiers like `.trim`, now v3 supports c
138138

139139
Read more about custom `v-model` modifiers in the [Custom Events](../component-custom-events.html#handling-v-model-modifiers) section.
140140

141+
## How to Migrate
142+
143+
We recommend:
144+
145+
- checking your codebase for `.sync` usage and replace it with `v-model`:
146+
147+
```html
148+
<ChildComponent :title.sync="pageTitle" />
149+
150+
<!-- to be replaced with -->
151+
152+
<ChildComponent v-model:title="pageTitle" />
153+
```
154+
155+
- for all `v-model`s without arguments, make sure to change props and events name to `modelValue` and `update:modelValue` respectively
156+
157+
```html
158+
<ChildComponent v-model="pageTitle" />
159+
```
160+
161+
```js
162+
// ChildComponent.vue
163+
164+
export default {
165+
props: {
166+
modelValue: String // previously was `value: String`
167+
},
168+
methods: {
169+
changePageTitle(title) {
170+
this.$emit('update:modelValue', title) // previously was `this.$emit('input', title)`
171+
}
172+
}
173+
}
174+
```
175+
141176
## Next Steps
142177

143178
For more information on the new `v-model` syntax, see:

0 commit comments

Comments
 (0)