コンテンツがある場合にのみスロットを表示する方法はありますか?
たとえば、シンプルな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']が、undefined が返されます。
誰かヒントを持っていますか?
ベストアンサー1
以下の場所で入手可能です
this.$slots.footer
したがって、これは機能するはずです。
hasFooterSlot() {
return !!this.$slots.footer;
}
例。