Hide vue paginate button if element doesn't exist - vue.js

Question

I'm trying to hide a vue paginate button if the item doesn't exist in my array. My code:
<b-pagination
:key="currentQuestionPage"
v-model="currentQuestionPage"
:total-rows="submissionFiles.length"
:per-page="perPage"
align="center"
first-number
last-number
limit="20"
#input="changePage()"
>
<template v-slot:page="{ page, active }">
{{ submissionFiles[page - 1][currentStudentPage - 1] && submissionFiles[page - 1][currentStudentPage - 1].order }}
</template>
</b-pagination>
However, instead of the button not rendering (what I'm hoping for), I'm getting a "blank" button:
Is there any way to prevent the button from rendering at all if it has empty content?

Answer 1

I don't think you show enough code to get a particularly useful answer here, but my guess would be:
You need to first create a computed property which is an array only of the items you want.
That way you end up with something more like this:
new Vue({
el: '#app',
data() {
return {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, test: true },
{ id: 2, test: false },
{ id: 3, test: true },
{ id: 4, test: false },
{ id: 5, test: true },
{ id: 6, test: true },
{ id: 7, test: false },
{ id: 8, test: true },
{ id: 9, test: false },
]
}
},
computed: {
// Here we compute the actual items we want:
usedItems(){
return this.items.filter(i => i.test);
},
rows() {
// Now we remove the previous "rows" var and use the computed property instead
// return this.items.length
return this.usedItems.length
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
<!-- Update items to show only the filtered selection: -->
:items="usedItems"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</div>