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

Posted 2023-02-22

【中文标题】如果元素不存在，则隐藏 vue 分页按钮

【英文标题】：Hide vue paginate button if element doesn't exist

【发布时间】：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>

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

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

【参考方案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>