From f8c24f3a6b3fe084a59e2f77717ed95c423b6546 Mon Sep 17 00:00:00 2001 From: nal Date: Sat, 21 Nov 2020 11:19:52 +0900 Subject: [PATCH 1/2] feature: original file copy --- src/.vuepress/config.js | 1 + src/guide/migration/v-if-v-for.md | 29 +++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 src/guide/migration/v-if-v-for.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index fb7aa795..2871b60b 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -129,6 +129,7 @@ const sidebar = { 'migration/render-function-api', 'migration/slots-unification', 'migration/transition', + 'migration/v-if-v-for', 'migration/v-model', 'migration/v-bind' ] diff --git a/src/guide/migration/v-if-v-for.md b/src/guide/migration/v-if-v-for.md new file mode 100644 index 00000000..54618343 --- /dev/null +++ b/src/guide/migration/v-if-v-for.md @@ -0,0 +1,29 @@ +--- +title: v-if vs. v-for Precedence +badges: + - breaking +--- + +# {{ $frontmatter.title }} + +## Overview + +- **BREAKING**: If used on the same element, `v-if` will have higher precedence than `v-for` + +## Introduction + +Two of the most commonly used directives in Vue.js are `v-if` and `v-for`. So it's no surprise that there comes a time when developers want to use both together. While this is not a recommended practice, there may be times when this is necessary, so we wanted to provide guidance for how it works. + +## 2.x Syntax + +In 2.x, when using `v-if` and `v-for` on the same element, `v-for` would take precedence. + +## 3.x Syntax + +In 3.x, `v-if` will always have the higher precedence than `v-for`. + +## Migration Strategy + +It is recommended to avoid using both on the same element due to the syntax ambiguity. + +Rather than managing this at the template level, one method for accomplishing this is to create a computed property that filters out a list for the visible elements. From 39615a8bd638e6f472f8dea026b35b1c0b415354 Mon Sep 17 00:00:00 2001 From: nal Date: Sat, 28 Nov 2020 23:21:10 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feature:=20v-if-v-for.md=E3=81=AE=E7=BF=BB?= =?UTF-8?q?=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/migration/v-if-v-for.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/guide/migration/v-if-v-for.md b/src/guide/migration/v-if-v-for.md index 54618343..4363886b 100644 --- a/src/guide/migration/v-if-v-for.md +++ b/src/guide/migration/v-if-v-for.md @@ -1,29 +1,29 @@ --- -title: v-if vs. v-for Precedence +title: v-if と v-for の優先順位 badges: - breaking --- # {{ $frontmatter.title }} -## Overview +## 概要 -- **BREAKING**: If used on the same element, `v-if` will have higher precedence than `v-for` +- **BREAKING**: 二つを同じエレメントで利用している場合、`v-if` は　`v-for` より優先されます。 -## Introduction +## イントロダクション -Two of the most commonly used directives in Vue.js are `v-if` and `v-for`. So it's no surprise that there comes a time when developers want to use both together. While this is not a recommended practice, there may be times when this is necessary, so we wanted to provide guidance for how it works. +Vue.js で最も一般的に使われているディレクティブの二つは `v-if` と `v-for` です。したがって開発者が両方を一緒に使用したいときが来るのは当然のことです。これは推奨される方法ではありませんが、必要な場合があるため、私たちはその仕組みについてのガイダンスを提供したいと思いました。 -## 2.x Syntax +## 2.x での構文 -In 2.x, when using `v-if` and `v-for` on the same element, `v-for` would take precedence. +2.x では、`v-if` と `v-for` を同じエレメントで使うと、`v-for` が優先されます。 -## 3.x Syntax +## 3.x での構文 -In 3.x, `v-if` will always have the higher precedence than `v-for`. +3.x では、 `v-if` はいつも `v-for` より優先されます。 -## Migration Strategy +## 移行の戦略 -It is recommended to avoid using both on the same element due to the syntax ambiguity. +構文の曖昧さにより、同じエレメントで両方の使用を避けることをお勧めします。 -Rather than managing this at the template level, one method for accomplishing this is to create a computed property that filters out a list for the visible elements. +これをテンプレートレベルで管理するのではなく、これを実現する一つの方法は表示されている要素のリストを除外する算出プロパティを作成することです。