[解決済み] コンテンツがある場合のみスロットを表示する
2022-09-11 20:25:27
質問
スロットにコンテンツがある場合のみ表示させる方法はありますか?
例えば、私は単純な
Card.vue
コンポーネントを作成しており、フッタースロットにコンテンツがある場合にのみフッターを表示させたいと思っています。
テンプレートです。
<template>
<div class="panel" :class="panelType">
<div class="panel-heading">
<h3 class="panel-title">
<slot name="title">
Default Title
</slot>
</h3>
</div>
<div class="panel-body">
<slot name="body"></slot>
<p class="category">
<slot name="category"></slot>
</p>
</div>
<div class="panel-footer" v-if="hasFooterSlot">
<slot name="footer"></slot>
</div>
</div>
</template>
スクリプトです。
<script>
export default {
props: {
active: true,
type: {
type: String,
default: 'default',
},
},
computed: {
panelType() {
return `panel-${this.type}`;
},
hasFooterSlot() {
return this.$slots['footer']
}
}
}
</script>
イン・イン・ビュー
<card type="success"></card>
上記のコンポーネントはフッターを含まないので、レンダリングされないはずですが、レンダリングされています。
を使ってみましたが
this.$slots['footer']
を使ってみましたが、これは未定義を返します。
どなたかヒントをお持ちではないでしょうか?
どのように解決するのですか?
以下のサイトで入手可能です。
this.$slots.footer
というわけで、これでうまくいくはずです。
hasFooterSlot() {
return !!this.$slots.footer
}
例 .
関連
-
未定義のプロパティ '0' を読み取ることができません。
-
Vueプロジェクトのビルド共通設定ファイル、request.jsとvue.config.js
-
[解決済み] vuepress2: Vueインスタンスを取得し、サードパーティのVueプラグインを使用できるようにするには?
-
[解決済み] Vuetify グリッドレイアウト v-layout v-flex
-
[解決済み】@clickとv-on:clickの違い Vuejs
-
[解決済み】Vue.jsの別ページへのリダイレクトについて
-
[解決済み】Vuex - ミューテーションに複数のパラメータを渡す
-
[解決済み】Vuejs:ルート変更時のイベント
-
[解決済み] Vueアプリのビルドを生成するには、どのコマンドを使用すればよいですか?
-
[解決済み] Vue.js - シングルファイルコンポーネントでヘルパー関数をグローバルに利用できるようにする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】CypressとJestは併用した方がいい?
-
[解決済み] Vue.jsで12件中1~3件を表示させるには?
-
[解決済み] npm run dev」「npm run watch」はどのようなスクリプトですか?
-
vue リクエストエラー Uncaught (プロミス内)
-
Vueプロジェクトのビルド共通設定ファイル、request.jsとvue.config.js
-
[解決済み】Vue2でデバウンスを実装するには?
-
[解決済み】他のアクションの中からアクションを呼び出す
-
[解決済み] Vue CLI CSSプリプロセッサーオプション:dart-sass VS node-sass?
-
[解決済み] Vueの「エクスポートデフォルト」と「新しいVue」の比較
-
[解決済み] Jest + Vuejsでwindow.location.hrefをモックするには?