Skip to content

Commit 7998ccc

Browse files
posvayyx990803
authored andcommitted
Add a note about v-else caveat with components and v-show (#299)
* Add a note about v-else caveat with components and v-show Refers to vuejs/vue#2639 * Make component + v-else caveat linkable. Add link in API
1 parent c8e3888 commit 7998ccc

File tree

2 files changed

+20
-0
lines changed

2 files changed

+20
-0
lines changed

src/api/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1563,6 +1563,7 @@ type: api
15631563
```
15641564

15651565
- **See also:** [Conditional Rendering - v-else](/guide/conditional.html#v-else)
1566+
- **See also:** [Conditional Rendering - Component caveat](/guide/conditional.html#Component-caveat)
15661567

15671568
### v-for
15681569

src/guide/conditional.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,25 @@ 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+
### Component caveat
72+
73+
When used with components and `v-show`, `v-else` doesn't get applied properly due to directives priorities. So instead of doing this:
74+
75+
```html
76+
<custom-component v-show="condition"></custom-component>
77+
<p v-else>This could be a component too</p>
78+
```
79+
80+
Replace the `v-else` with another `v-show`:
81+
82+
```html
83+
<custom-component v-show="condition"></custom-component>
84+
<p v-show="!condition">This could be a component too</p>
85+
```
86+
87+
It does work as intended with `v-if`.
88+
7089
## v-if vs. v-show
7190

7291
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)