Skip to content

Commit 10cba56

Browse files
posvakazupon
authored andcommitted
Add a note about v-else caveat with components and v-show (vuejs#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 f669de1 commit 10cba56

File tree

2 files changed

+19
-0
lines changed

2 files changed

+19
-0
lines changed

src/api/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1561,6 +1561,7 @@ type: api
15611561
```
15621562

15631563
- **参照:** [条件付きレンダリング - v-else](/guide/conditional.html#v-else)
1564+
- **See also:** [Conditional Rendering - Component caveat](/guide/conditional.html#Component-caveat)
15641565

15651566
### v-for
15661567

src/guide/conditional.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,24 @@ Vue.js では、同じことを達成するために、`v-if` ディレクティ
6767

6868
`v-else` 要素は、`v-if` または `v-show` の直後になければなりません。それ以外の場合は認識されません。
6969

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

7290
`v-if` ブロックが切り替えられる時、Vue.js は `v-if` 内部のテンプレートコンテンツもデータバインディングまたは子コンポーネントを含むことができるため、部分的なコンパイル / teardown 処理を実行する必要があります。`v-if` は、イベントリスナと子コンポーネント内部の条件ブロックが適切に破棄され、そして切り替えられるまでの間再作成されるため、"リアル"な条件レンダリングです。

0 commit comments

Comments
 (0)