Hide vue paginate button if element doesn't exist

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>