From 53b5b94ca1968e729cd64ca83967d74abde73f74 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Tue, 10 May 2016 23:59:05 +0200 Subject: [PATCH 1/2] Add a note about v-else caveat with components and v-show Refers to vuejs/vue#2639 --- src/guide/conditional.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/guide/conditional.md b/src/guide/conditional.md index 8ce7726fde..e829d1c728 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -67,6 +67,23 @@ You can use the `v-else` directive to indicate an "else block" for `v-if` or `v- The `v-else` element must immediately follow the `v-if` or `v-show` element - otherwise it will not be recognized. + +**Caveat**: when used with components and `v-show`, `v-else` doesn't get applied properly due to directives priorities. So instead of doing this: + +```html + +

This could be a component too

+``` + +Replace the `v-else` with another `v-show`: + +```html + +

This could be a component too

+``` + +It does work as intended with `v-if`. + ## v-if vs. v-show When a `v-if` block is toggled, Vue.js will have to perform a partial compilation/teardown process, because the template content inside `v-if` can also contain data bindings or child components. `v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. From 097fddbb9878fc94b42bdc04534b5fbd1ad3d488 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 11 May 2016 09:45:36 +0200 Subject: [PATCH 2/2] Make component + v-else caveat linkable. Add link in API --- src/api/index.md | 1 + src/guide/conditional.md | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/api/index.md b/src/api/index.md index 5f3e03da7d..4a256cf17e 100644 --- a/src/api/index.md +++ b/src/api/index.md @@ -1563,6 +1563,7 @@ type: api ``` - **See also:** [Conditional Rendering - v-else](/guide/conditional.html#v-else) +- **See also:** [Conditional Rendering - Component caveat](/guide/conditional.html#Component-caveat) ### v-for diff --git a/src/guide/conditional.md b/src/guide/conditional.md index e829d1c728..5eecb72f46 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -68,7 +68,9 @@ You can use the `v-else` directive to indicate an "else block" for `v-if` or `v- The `v-else` element must immediately follow the `v-if` or `v-show` element - otherwise it will not be recognized. -**Caveat**: when used with components and `v-show`, `v-else` doesn't get applied properly due to directives priorities. So instead of doing this: +### Component caveat + +When used with components and `v-show`, `v-else` doesn't get applied properly due to directives priorities. So instead of doing this: ```html