From e13b49eeb20bcf2fd6652f8ea8340eab45b4382c Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Wed, 23 Sep 2020 20:36:52 +0300
Subject: [PATCH 01/12] fix: fixed v-if v-for on styleguide

---
 src/style-guide/README.md | 79 +++++++++------------------------------
 1 file changed, 17 insertions(+), 62 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 3c1280838f..1c99304e1a 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -196,7 +196,7 @@ There are two common cases where this can be tempting:
 - To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
 
 ::: details Detailed Explanation
-When Vue processes directives, `v-for` has a higher priority than `v-if`, so that this template:
+When Vue processes directives, `v-if` has a higher priority than `v-for`, so that this template:
 
 ``` html
 <ul>
@@ -210,19 +210,9 @@ When Vue processes directives, `v-for` has a higher priority than `v-if`, so tha
 </ul>
 ```
 
-Will be evaluated similar to:
+Will throw an error, because `v-if` directive will be evaluated first and property `user` does not exist at this moment.
 
-``` js
-this.users.map(user => {
-  if (user.isActive) {
-    return user.name
-  }
-})
-```
-
-So even if we only render elements for a small fraction of users, we have to iterate over the entire list every time we re-render, whether or not the set of active users has changed.
-
-By iterating over a computed property instead, like this:
+This could be fixed by iterating over a computed property instead, like this:
 
 ``` js
 computed: {
@@ -243,40 +233,18 @@ computed: {
 </ul>
 ```
 
-We get the following benefits:
+Alternatively, we can use a `<template>` tag with `v-for` to wrap `li` element:
 
-- The filtered list will _only_ be re-evaluated if there are relevant changes to the `users` array, making filtering much more efficient.
-- Using `v-for="user in activeUsers"`, we _only_ iterate over active users during render, making rendering much more efficient.
-- Logic is now decoupled from the presentation layer, making maintenance (change/extension of logic) much easier.
-
-We get similar benefits from updating:
-
-``` html
+```html
 <ul>
-  <li
-    v-for="user in users"
-    v-if="shouldShowUsers"
-    :key="user.id"
-  >
-    {{ user.name }}
-  </li>
+  <template v-for="user in users" :key="user.id">
+    <li v-if="user.isActive">
+      {{ user.name }}
+    </li>
+  </template>
 </ul>
 ```
 
-to:
-
-``` html
-<ul v-if="shouldShowUsers">
-  <li
-    v-for="user in users"
-    :key="user.id"
-  >
-    {{ user.name }}
-  </li>
-</ul>
-```
-
-By moving the `v-if` to a container element, we're no longer checking `shouldShowUsers` for _every_ user in the list. Instead, we check it once and don't even evaluate the `v-for` if `shouldShowUsers` is false.
 :::
 
 <div class="style-example style-example-bad">
@@ -293,18 +261,6 @@ By moving the `v-if` to a container element, we're no longer checking `shouldSho
   </li>
 </ul>
 ```
-
-``` html
-<ul>
-  <li
-    v-for="user in users"
-    v-if="shouldShowUsers"
-    :key="user.id"
-  >
-    {{ user.name }}
-  </li>
-</ul>
-```
 </div>
 
 <div class="style-example style-example-good">
@@ -321,14 +277,13 @@ By moving the `v-if` to a container element, we're no longer checking `shouldSho
 </ul>
 ```
 
-``` html
-<ul v-if="shouldShowUsers">
-  <li
-    v-for="user in users"
-    :key="user.id"
-  >
-    {{ user.name }}
-  </li>
+```html
+<ul>
+  <template v-for="user in users" :key="user.id">
+    <li v-if="user.isActive">
+      {{ user.name }}
+    </li>
+  </template>
 </ul>
 ```
 </div>

From c9c0d57d92ee18cc7274237b18ca066e7685e3f0 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Wed, 23 Sep 2020 20:40:00 +0300
Subject: [PATCH 02/12] fix: fixed directives API for v-if v-for

---
 src/api/directives.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/directives.md b/src/api/directives.md
index de4cbc218a..653cec8680 100644
--- a/src/api/directives.md
+++ b/src/api/directives.md
@@ -62,7 +62,7 @@
 
   This directive triggers transitions when its condition changes.
 
-  When used together with `v-if`, `v-for` has a higher priority than v-if. See the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
+  When used together with `v-for`, `v-if` has a higher priority than v-if. We don't recommend using two these directives together on one element, see the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
 
 - **See also:** [Conditional Rendering - v-if](../guide/conditional.html#v-if)
 

From 823cc4ff0019aa0cc683843c679e5b1f08ca42ed Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Wed, 23 Sep 2020 20:45:18 +0300
Subject: [PATCH 03/12] fix: fixed v-if with v-for on list

---
 src/guide/list.md | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/guide/list.md b/src/guide/list.md
index 6ac92074e4..18dcd4b430 100644
--- a/src/guide/list.md
+++ b/src/guide/list.md
@@ -268,25 +268,23 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 Note that it's **not** recommended to use `v-if` and `v-for` together. Refer to [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for details.
 :::
 
-When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only _some_ items, like below:
+When they exist on the same node, `v-if` has a higher priority than `v-for`. That means that if `v-if` condition depends on the property from `v-for` scope, we will have an error: 
 
 ```html
 <li v-for="todo in todos" v-if="!todo.isComplete">
+<!-- Property "todo" was accessed during render but is not defined on instance. -->
   {{ todo }}
 </li>
 ```
 
-The above only renders the todos that are not complete.
-
-If instead, your intent is to conditionally skip execution of the loop, you can place the `v-if` on a wrapper element (or [`<template>`](conditional#conditional-groups-with-v-if-on-lt-template-gt)). For example:
+This can be fixed with moving `v-for` to the wrapping <template> tag:
 
 ```html
-<ul v-if="todos.length">
-  <li v-for="todo in todos">
+<template> v-for="todo in todos"
+  <li v-if="!todo.isComplete">
     {{ todo }}
   </li>
-</ul>
-<p v-else>No todos left!</p>
+</template>
 ```
 
 ## `v-for` with a Component

From 7382263ccf78de351c627c69f5083739dfc0ed63 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Wed, 23 Sep 2020 20:50:44 +0300
Subject: [PATCH 04/12] fix: fixed conditional for v-if

---
 src/guide/conditional.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/conditional.md b/src/guide/conditional.md
index 46dd36c805..daa3cd40c0 100644
--- a/src/guide/conditional.md
+++ b/src/guide/conditional.md
@@ -91,4 +91,4 @@ Generally speaking, `v-if` has higher toggle costs while `v-show` has higher ini
 Using `v-if` and `v-for` together is **not recommended**. See the [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for further information.
 :::
 
-When used together with `v-if`, `v-for` has a higher priority than `v-if`. See the [list rendering guide](list#v-for-with-v-if) for details.
+When used together with `v-if`, `v-if` has a higher priority than `v-for`. See the [list rendering guide](list#v-for-with-v-if) for details.

From 74a1179048c783c3ec0942e70c5c694f24731743 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Wed, 23 Sep 2020 20:55:01 +0300
Subject: [PATCH 05/12] fix: fixed typo

---
 src/guide/list.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/list.md b/src/guide/list.md
index 18dcd4b430..52b8a435f9 100644
--- a/src/guide/list.md
+++ b/src/guide/list.md
@@ -280,7 +280,7 @@ When they exist on the same node, `v-if` has a higher priority than `v-for`. Tha
 This can be fixed with moving `v-for` to the wrapping <template> tag:
 
 ```html
-<template> v-for="todo in todos"
+<template v-for="todo in todos">
   <li v-if="!todo.isComplete">
     {{ todo }}
   </li>

From b7799f3f9c47c59bd6b783b2cf39a3d94b844682 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Fri, 25 Sep 2020 06:31:34 +0300
Subject: [PATCH 06/12] fix: fixed directives.md

---
 src/api/directives.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/directives.md b/src/api/directives.md
index 653cec8680..6743d6357a 100644
--- a/src/api/directives.md
+++ b/src/api/directives.md
@@ -62,7 +62,7 @@
 
   This directive triggers transitions when its condition changes.
 
-  When used together with `v-for`, `v-if` has a higher priority than v-if. We don't recommend using two these directives together on one element, see the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
+  When used together with `v-for`, `v-if` has a higher priority than `v-for`. We don't recommend using these two directives together on one element, see the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
 
 - **See also:** [Conditional Rendering - v-if](../guide/conditional.html#v-if)
 

From 31ea3de9b0fc82f5c7f3ec4ef382fe7020047626 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Fri, 25 Sep 2020 06:34:35 +0300
Subject: [PATCH 07/12] fix:  fixed error on list

---
 src/guide/list.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/guide/list.md b/src/guide/list.md
index 52b8a435f9..c0c5c7d945 100644
--- a/src/guide/list.md
+++ b/src/guide/list.md
@@ -268,11 +268,12 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 Note that it's **not** recommended to use `v-if` and `v-for` together. Refer to [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for details.
 :::
 
-When they exist on the same node, `v-if` has a higher priority than `v-for`. That means that if `v-if` condition depends on the property from `v-for` scope, we will have an error: 
+When they exist on the same node, `v-if` has a higher priority than `v-for`. That means the `v-if` condition will not have access to variables from the scope of the `v-for`:
 
 ```html
+<!-- This will throw an error because property "todo" is not defined on instance. -->
+
 <li v-for="todo in todos" v-if="!todo.isComplete">
-<!-- Property "todo" was accessed during render but is not defined on instance. -->
   {{ todo }}
 </li>
 ```

From 86aa54dfa11bd2bc02bbd96a5ecc9f02045d84c9 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Fri, 25 Sep 2020 06:35:55 +0300
Subject: [PATCH 08/12] fix: fixed grammar

---
 src/guide/list.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/list.md b/src/guide/list.md
index c0c5c7d945..b1dc7b5a03 100644
--- a/src/guide/list.md
+++ b/src/guide/list.md
@@ -278,7 +278,7 @@ When they exist on the same node, `v-if` has a higher priority than `v-for`. Tha
 </li>
 ```
 
-This can be fixed with moving `v-for` to the wrapping <template> tag:
+This can be fixed by moving `v-for` to a wrapping `<template>` tag:
 
 ```html
 <template v-for="todo in todos">

From 18763d707faa9bde759d7be4ed96428ab0c7a9fa Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Fri, 25 Sep 2020 06:38:17 +0300
Subject: [PATCH 09/12] fix: fixed styleguide `li` mention

---
 src/style-guide/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 1c99304e1a..98987b4796 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -233,7 +233,7 @@ computed: {
 </ul>
 ```
 
-Alternatively, we can use a `<template>` tag with `v-for` to wrap `li` element:
+Alternatively, we can use a `<template>` tag with `v-for` to wrap the `<li>` element:
 
 ```html
 <ul>

From ca7df2d226baf0abf12f8be426d6c04da0d6d1ae Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Fri, 25 Sep 2020 06:41:32 +0300
Subject: [PATCH 10/12] fix: fixed grammar

---
 src/guide/conditional.md  | 2 +-
 src/style-guide/README.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/conditional.md b/src/guide/conditional.md
index daa3cd40c0..54211fa80c 100644
--- a/src/guide/conditional.md
+++ b/src/guide/conditional.md
@@ -91,4 +91,4 @@ Generally speaking, `v-if` has higher toggle costs while `v-show` has higher ini
 Using `v-if` and `v-for` together is **not recommended**. See the [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for further information.
 :::
 
-When used together with `v-if`, `v-if` has a higher priority than `v-for`. See the [list rendering guide](list#v-for-with-v-if) for details.
+When `v-if` and `v-for` are both used on the same element, the `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.
diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 98987b4796..2253b379ff 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -210,7 +210,7 @@ When Vue processes directives, `v-if` has a higher priority than `v-for`, so tha
 </ul>
 ```
 
-Will throw an error, because `v-if` directive will be evaluated first and property `user` does not exist at this moment.
+Will throw an error, because the `v-if` directive will be evaluated first and the iteration variable `user` does not exist at this moment.
 
 This could be fixed by iterating over a computed property instead, like this:
 

From ddf415ada69c85d1173c25c096933deace692521 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Fri, 25 Sep 2020 17:58:07 +0300
Subject: [PATCH 11/12] Update src/api/directives.md

Co-authored-by: Phan An <me@phanan.net>
---
 src/api/directives.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/directives.md b/src/api/directives.md
index 6743d6357a..dd370a8d03 100644
--- a/src/api/directives.md
+++ b/src/api/directives.md
@@ -62,7 +62,7 @@
 
   This directive triggers transitions when its condition changes.
 
-  When used together with `v-for`, `v-if` has a higher priority than `v-for`. We don't recommend using these two directives together on one element, see the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
+  When used together, `v-if` has a higher priority than `v-for`. We don't recommend using these two directives together on one element — see the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
 
 - **See also:** [Conditional Rendering - v-if](../guide/conditional.html#v-if)
 

From 26e1e8a2b6132d5d3eb46fa0ddd4dfdcf2709755 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Fri, 25 Sep 2020 17:58:26 +0300
Subject: [PATCH 12/12] Update src/guide/conditional.md

Co-authored-by: Phan An <me@phanan.net>
---
 src/guide/conditional.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/conditional.md b/src/guide/conditional.md
index 54211fa80c..c35f1e2efb 100644
--- a/src/guide/conditional.md
+++ b/src/guide/conditional.md
@@ -91,4 +91,4 @@ Generally speaking, `v-if` has higher toggle costs while `v-show` has higher ini
 Using `v-if` and `v-for` together is **not recommended**. See the [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for further information.
 :::
 
-When `v-if` and `v-for` are both used on the same element, the `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.
+When `v-if` and `v-for` are both used on the same element, `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.