Vue 3 コンポジション API: 値が False の場合でも、Props と v-if をレンダリングします。

Question

ここで、よくわからない問題に遭遇しました。 true または false に設定できる「active」という名前の prop が渡される子コンポーネントを含めます。 「true」が渡された場合はコンポーネントの一部が表示され、「false」が渡された場合は表示されないという考えです。

私の理解では、次のようにプロップ名を使用できるはずです:

リーリー

問題は、上記のステートメントの v-if を true または false に直接設定すると、期待どおりに動作することです。これを小道具として渡すと、true か false に関係なく、常に表示されます。

有効 (何も表示されない):

リーリー

無効 (active の値に関係なく、div 内のコンテンツが表示されます):

リーリー ＃＃＃どうしてこれなの？ 「active」の値を表示して確認し、値 false が渡されましたが、値が false であるにもかかわらずレンダリングされます。ここで何かが足りないのでしょうか？引用符を使用して、引用符なしで、 ref を使用してローカル値を渡し、それを使用してみました:

リーリー

これもうまくいきませんでした。

Answer 1

エクスポートのデフォルトでは、

リーリー

コンポーネント テンプレートで、

リーリー

コンポーネントを使用する場合は、アクティブな要素を false にバインドします

リーリー

Answer 2

これは、prop が親コンポーネントから渡された文字列であるためです (他の HTML 属性のデフォルトの動作と同じです)。 prop をブール値として渡すには、v-bind 構文または : 短縮表現を使用して、false が ## として解析されるようにする必要があります。 # JavaScript 式 文字列の代わり: リーリー ＃＃＃または＃＃＃ リーリー