ブックマーク一覧にて、ブックマークされた投稿が無い場合は「ブックマークされた投稿はありません」と表示させたい

Question

#ブックマーク一覧にて、ブックマークされた投稿が無い場合は「ブックマークされた投稿はありません」と表示させたい

現状、ブックマークされた投稿が無い場合は、何も表示させていないです。

ブックマークされた投稿がある場合は、以下のように表示されるようにしております。

#試したこと

三項演算子を使って以下のようにしてみましたが、「ブックマークされた投稿はありません」という文字列も表示されず
何も変化がない状態です・・

<paginate name="paginate-bookmarkList" tag="ol" :list="bookmarkList" :per="3" :style="bookmarkList == '' ? "ブックマークされた投稿はありません" : 'display:flex;'">

分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願いいたします。

#実際のコード

<template>
  <div>
    <Header />
    <div class="bookmarkList flex">
      <h3 class="bookmarkList-title flex">{{ bookmarkData.name }} さんのブックマーク一覧</h3>
      <hr class="separate" />
      <div class="bookmarkList-posts">
        {{bookmarkList.list}}
        <paginate name="paginate-bookmarkList" tag="ol" :list="bookmarkList" :per="3" :style="bookmarkList == '' ? "ブックマークされた投稿はありません" : 'display:flex;'">
          
          <List
            v-for="(list, index) in paginated('paginate-bookmarkList')"
            :index="index"
            :list="list"
            :key="list.id"
          />
        </paginate>
        <paginate-links
          for="paginate-bookmarkList"
          class="pagination flex"
          :show-step-links="true"
          :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
        ></paginate-links>
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      bookmarkData: {},
      paginate: ["paginate-bookmarkList"],
      bookmarkList: []
    };
  },
  components: {
    Header,
    List
  },

Answer 1

ブックマークされた投稿が無い場合のテキストをstyleに記載しているのが誤りではないでしょうか。styleはCSSを書く場所と思われます。

v-ifを使って、bookmarkListの件数に応じてテキストを表示してはどうでしょうか。

<paginate name="paginate-bookmarkList" tag="ol" :list="bookmarkList" :per="3" v-if="bookmarkList.length !== 0">
</paginate>
<div v-else>
  ブックマークされた投稿はありません
</div>

Comments

[TMTN]

akkie様
ご回答いただきありがとうございます。
styleに記載しているのが誤りなのですね。ご教示いただきありがとうございます。

ご提示いただいたコードだと「v-else」ディレクティブは、「v-if」または「v-else-if」ディレクティブを持つ要素が前にある必要があります。とエラーが出たため、以下コードとしましたが、何も表示されない状況です・・

--------------------------------------------------------
<paginate
name="paginate-bookmarkList"
tag="ol"
:list="bookmarkList"
:per="3"
v-if="bookmarkList.length !== 0"
>
<List
v-for="(bookmark) in paginated('paginate-bookmarkList')"
:bookmark="bookmark"
:key="bookmark.id"
/>
</paginate>
<div v-else>ブックマークされた投稿はありません</div>
--------------------------------------------------------

[TMTN]

akkie様

大変申し訳ございません。
CSSの指定が誤って文字色を背景色を被っていたため表示されていないと勘違いしてしまいました・・
CSSを修正してあげると切り替わってやりたかった挙動となりました。

お力添えをいただき本当にありがとうございました。
本当に助かりました・・