1---
2title: v-show Does Not Work on template or With v-else
3impact: MEDIUM
4impactDescription: Using v-show on template silently fails, element is always rendered
5type: capability
6tags: [vue3, conditional-rendering, v-show, template, limitations]
7---
8 
9# v-show Does Not Work on template or With v-else
10 
11**Impact: MEDIUM** - `v-show` cannot be used on `<template>` elements because templates don't render to the DOM (so there's nothing to apply `display: none` to). Additionally, `v-show` does not support `v-else`. Using these incorrectly results in elements that are always visible or else branches that never work.
12 
13## Task Checklist
14 
15- [ ] Never use v-show on `<template>` elements - use v-if instead
16- [ ] Never use v-else with v-show - use separate v-show with negated condition
17- [ ] Remember v-show only works on actual DOM elements
18- [ ] If you need to toggle multiple elements frequently, wrap in a real element (div, span)
19 
20**Incorrect:**
21```html
22<!-- WRONG: v-show on <template> - silently does nothing -->
23<template>
24  <template v-show="isVisible">
25    <h1>Title</h1>
26    <p>Content</p>
27  </template>
28  <!-- These elements will ALWAYS be visible -->
29</template>
30```
31 
32```html
33<!-- WRONG: v-else with v-show - v-else is not supported -->
34<template>
35  <div v-show="isLoggedIn">Welcome!</div>
36  <div v-else>Please log in</div>  <!-- This v-else won't work -->
37</template>
38```
39 
40```html
41<!-- WRONG: Mixing v-show and v-else expectations -->
42<template>
43  <span v-show="status === 'success'">Success!</span>
44  <span v-else-if="status === 'error'">Error</span>  <!-- Not supported -->
45</template>
46```
47 
48**Correct:**
49```html
50<!-- CORRECT: Use v-if on <template> for multiple elements -->
51<template>
52  <template v-if="isVisible">
53    <h1>Title</h1>
54    <p>Content</p>
55  </template>
56</template>
57```
58 
59```html
60<!-- CORRECT: Use negated v-show for "else" behavior -->
61<template>
62  <div v-show="isLoggedIn">Welcome!</div>
63  <div v-show="!isLoggedIn">Please log in</div>
64</template>
65```
66 
67```html
68<!-- CORRECT: Wrap in a real element if you need v-show for multiple elements -->
69<template>
70  <div v-show="isVisible">
71    <h1>Title</h1>
72    <p>Content</p>
73  </div>
74</template>
75```
76 
77```html
78<!-- CORRECT: Use v-if/v-else when you need else branches -->
79<template>
80  <div v-if="status === 'success'">Success!</div>
81  <div v-else-if="status === 'error'">Error</div>
82  <div v-else>Loading...</div>
83</template>
84```
85 
86```html
87<!-- CORRECT: Multiple v-show conditions -->
88<template>
89  <span v-show="status === 'success'">Success!</span>
90  <span v-show="status === 'error'">Error</span>
91  <span v-show="status === 'loading'">Loading...</span>
92</template>
93```
94 
95## Why This Limitation Exists
96 
97```javascript
98// v-show works by toggling the CSS display property
99// This requires an actual DOM element
100 
101// <template> is a virtual element - it doesn't render to DOM
102// It's just a wrapper for Vue's rendering logic
103 
104// After compilation:
105// <template v-if="show"><p>Hi</p></template>
106// Renders as: <p>Hi</p> (when show is true)
107// Template itself is gone
108 
109// v-show needs a real element to set display: none on
110// Since <template> doesn't exist in DOM, v-show has nothing to work with
111```
112 
113## When to Choose Each
114 
115| Need | Use |
116|------|-----|
117| Toggle multiple elements with CSS | Wrap in real element + `v-show` |
118| Toggle multiple elements without wrapper | `<template v-if>` |
119| Need v-else branches | `v-if`/`v-else` |
120| Frequent toggle, single element | `v-show` |
121| Frequent toggle, need "else" | Two `v-show` with negated conditions |
122 
123## Reference
124- [Vue.js Conditional Rendering - v-show](https://vuejs.org/guide/essentials/conditional.html#v-show)
125