diff options
Diffstat (limited to 'doc/development/fe_guide/vue3_migration.md')
-rw-r--r-- | doc/development/fe_guide/vue3_migration.md | 49 |
1 files changed, 48 insertions, 1 deletions
diff --git a/doc/development/fe_guide/vue3_migration.md b/doc/development/fe_guide/vue3_migration.md index d06e93da0f3..7da462a5f89 100644 --- a/doc/development/fe_guide/vue3_migration.md +++ b/doc/development/fe_guide/vue3_migration.md @@ -8,7 +8,10 @@ info: To determine the technical writer assigned to the Stage/Group associated w Preparations for a Vue 3 migration are tracked in epic [&3174](https://gitlab.com/groups/gitlab-org/-/epics/3174) -In order to prepare for the eventual migration to Vue 3.x, we should be wary about adding the following features to the codebase: +In order to prepare for the eventual migration to Vue 3.x, we should not use the following deprecated features in the codebase: + +NOTE: +Our linting rules block the use of these deprecated features. ## Vue filters @@ -132,3 +135,47 @@ shallowMount(MyAwesomeComponent, { } }) ``` + +## Props default function `this` access + +**Why?** + +In Vue 3, props default value factory functions no longer have access to `this` +(the component instance). + +**What to use instead** + +Write a computed prop that resolves the desired value from other props. This +will work in both Vue 2 and 3. + +```html +<script> +export default { + props: { + metric: { + type: String, + required: true, + }, + title: { + type: String, + required: false, + default: null, + }, + }, + computed: { + actualTitle() { + return this.title ?? this.metric; + }, + }, +} + +</script> + +<template> + <div>{{ actualTitle }}</div> +</template> +``` + +[In Vue 3](https://v3.vuejs.org/guide/migration/props-default-this.html#props-default-function-this-access), +the props default value factory is passed the raw props as an argument, and can +also access injections. |