#ページネーションにて値無いときは非表示にしたい
赤で囲っているようにブックマークされたものが存在する場合は、投稿一覧同様にページネーションを表示させるようにしていますが、
ブックマークしたものが存在しない場合は、ページネーション(paginate-links)を非表示としたいです。
<paginate-links for="paginate-bookmarkList" class="pagination flex" :show-step-links="true" > </paginate-links>
ちなみにページネーションのライブラリは「vue-paginate」を使用しております。
#試したこと
:style="{ bookmarkList== '' ? 'display:none;' : 'display:flex;' }"
三項演算子を使ってdata()内にあるbookmarkListに何も入っていなければ非表示、入っていたら表示させようとしたが
この記述方法では問題があるのかしたい挙動にはなりませんでいした。
分かる方いらっしゃいましたらお力添えを頂きたいです。
宜しくお願い致します。
export default { data() { return { listData: [], paginate: ["paginate-listData", "paginate-bookmarkList"], bookmarkList: [], }; <div class="profile-posts"> <paginate name="paginate-listData" tag="ol" :list="listData" :per="3"> <List v-for="(list, index) in paginated('paginate-listData')" :index="index" :list="list" :key="list.id" /> </paginate> <paginate-links for="paginate-listData" class="pagination flex" :show-step-links="true" > </paginate-links> </div> <hr class="separate" /> <h3 class="bookmark-list flex"> {{ profileData.name }} さんのブックマーク一覧 </h3> <div class="profile-posts"> <paginate name="paginate-bookmarkList" tag="ol" :list="bookmarkList" :per="3" > <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" > </paginate-links> </div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。