スロットの内容が空であるかどうかを確認する

Question

私は少しの読み込みコンポーネントを持っています。デフォルトのテキストは「読み込み中...」になります。スロットのための良い候補ので、私は私のテンプレートとしてこのようなものを持っている：私は、例えばとロードメッセージを変更することができます

<p class="loading"><i class="fa fa-spinner fa-spin"></i><slot>Loading...</slot></p>

<loading>Searching...</loading>。しかし、私が望むふるまいは、スロットコンテンツが提供されていない場合だけでなく、スロットコンテンツがヌルまたは空白の場合にもデフォルトメッセージを表示することではありません。現時点では、私がしている場合。 <loading>{{loadingMessage}}</loading> loadMessageがnullの場合、テキストは表示されません（デフォルトのテキストを表示する場所）。理想的には私はthis.$slots.defaultをテストする必要があります。これは、コンテンツが渡されたかどうかを示しますが、それが空であるかどうかをどのようにして調べますか？ this.$slots.default.textは未定義を返します。

Answer 1

this.$slotsをチェックする計算プロパティが必要です。デフォルトのスロットではthis.$slots.defaultをチェックし、スロット名をdefaultに置き換えてください。

computed: { 
    slotPassed() { 
    return !!this.$slots.default[0].text.length 
    } 
} 

そして、あなたのテンプレートでそれを使用します。

<template> 
    <div> 
    <slot v-if="slotPassed">Loading...</slot> 
    <p v-else>Searching...</p> 
    </div> 
</template> 

あなたは小さな例hereを見ることができます。フォールバックコンテンツがどのように表示され、スロット内にある「デフォルトコンテンツ」ではないかに注目してください。

： 私の言葉遣いがよかったと思います。あなたはが必要ですの値は$slots.Xの値ですが、計算されたプロパティはです。方法はです。

<template> 
    <div> 
    <slot v-if="!!$slots.default[0].text">Loading...</slot> 
    <p v-else>Searching...</p> 
    </div> 
</template>