Skip to content

Add a note about v-else caveat with components and v-show #299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 11, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
19 changes: 19 additions & 0 deletions src/guide/conditional.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,25 @@ 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.


### 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
<custom-component v-show="condition"></custom-component>
<p v-else>This could be a component too</p>
```

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

```html
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">This could be a component too</p>
```

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.
Expand Down