Skip to content

Commit 0dbcf98

Browse files
committed
Add a note about v-else caveat with components and v-show
Refers to vue#2639
1 parent e0a7b07 commit 0dbcf98

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

src/guide/conditional.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,23 @@ You can use the `v-else` directive to indicate an "else block" for `v-if` or `v-
6767

6868
The `v-else` element must immediately follow the `v-if` or `v-show` element - otherwise it will not be recognized.
6969

70+
71+
**Caveat**: when used with components and `v-show`, `v-else` doesn't get applied properly due to directives priorities. So instead of doing this:
72+
73+
```html
74+
<custom-component v-show="condition"></custom-component>
75+
<p v-else>This could be a component too</p>
76+
```
77+
78+
Replace the `v-else` with another `v-show`:
79+
80+
```html
81+
<custom-component v-show="condition"></custom-component>
82+
<p v-show="!condition">This could be a component too</p>
83+
```
84+
85+
It does work as intended with `v-if`.
86+
7087
## v-if vs. v-show
7188

7289
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.

0 commit comments

Comments
 (0)