如果元素不存在，则隐藏 vue 分页按钮答案

【问题标题】：Hide vue paginate button if element doesn't exist如果元素不存在，则隐藏 vue 分页按钮
【发布时间】：2021-07-15 20:41:30
【问题描述】：

如果我的数组中不存在该项目，我正在尝试隐藏一个 vue 分页按钮。我的代码：

<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>

但是，我得到的是一个“空白”按钮，而不是未呈现的按钮（我所希望的）：

如果按钮内容为空，有什么方法可以阻止按钮呈现？

【问题讨论】：

标签： vue.js pagination bootstrap-vue

【解决方案1】：

我认为您在这里显示的代码不足以获得特别有用的答案，但我的猜测是：

您需要首先创建一个计算属性，它是一个仅包含您想要的项目的数组。

这样你最终会得到更像这样的东西：

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>

【讨论】：