diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 12:55:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 12:55:51 +0300 |
commit | e8d2c2579383897a1dd7f9debd359abe8ae8373d (patch) | |
tree | c42be41678c2586d49a75cabce89322082698334 /doc/development/fe_guide/vue3_migration.md | |
parent | fc845b37ec3a90aaa719975f607740c22ba6a113 (diff) |
Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42
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. |