Question

我正在尝试在vueJS中对视图进行分页，并且我的分页标记如下：

              <nav aria-label="Page navigation example">
                <ul class="pagination">
          <li class="page-item"><a class="page-link"  v-if="page != 1" @click="page--">Previous</a></li>
          <li class="page-item"><a class="page-link" v-for="pageNumber in pages.slice(page-1, page+5)" @click="page = pageNumber"> [[pageNumber]] </a></li>
          <li class="page-item"><a class="page-link" @click="page++" v-if="page < pages.length">Next</a></li>
                </ul>
              </nav>

尽管分页代码都很好，但分页却以某种方式垂直而不是水平地排列：

我注意到，这行似乎正在破坏它：

          <li class="page-item"><a class="page-link" v-for="pageNumber in pages.slice(page-1, page+5)" @click="page = pageNumber"> [[pageNumber]] </a></li>

有人知道为什么会这样吗？我不是前端开发人员，而且我的HTML技能也不是最好的-任何指针都很棒。

谢谢。

Answer 1

分页看起来完全不对的原因是，您将v-for标签上的a放在了li旁边。

您需要将其放置在li上，因为每个li代表一个页面按钮

在代码段中，我已将您的v-if替换为下一个按钮，因为它可能会使臀部消失。相反，我使用了条件类。

作为替代方案，您可以利用bootstrap-vue's pagination，这样可以避免自己编写逻辑的麻烦。

new Vue({
  el: '#app',
  data() {
    return {
      page: 1,
      pages: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  }
})

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item" :class="{ 'disabled': page == pages[0] }">
          <a class="page-link" href="#" @click="page--">
            Previous
          </a>
        </li>
      <li class="page-item" 
          :class="{ 'active': page === pageNumber }" 
          v-for="pageNumber in pages.slice(page-1, page+4)">
        <a class="page-link" href="#" @click="page = pageNumber">
          {{ pageNumber }}
        </a>
      </li>
      <li class="page-item" :class="{ 'disabled': page >= pages.length }">
        <a class="page-link" href="#" @click="page++">
          Next
        </a>
      </li>
    </ul>
  </nav>
</div>

Vue JS似乎打破了引导分页

1 个答案: