vue-pagination-2 不工作

Question

我是 VueJS 的新手，几乎一切正常，除了分页。事实上，我的警告为零。控制台中出现的唯一内容是“[HMR] 等待来自 WDS 的更新信号... log.js?4244:23”，然后在下一行显示“>”。

话虽如此，分页显示了正确的页数 - 考虑到来自 JSON 的数据，但我不知道如何将分页连接到 UL 或应用程序。

至少当出现错误时，我可以弄清楚一些事情。感谢您提供任何帮助，并提前致谢。

<template>
<div class="container" id="app">
  <span>VueJS-Example</span>
  <ul class="list-group list-inline mHeaders">
    <li class="list-group-item">Title</li>
    <li class="list-group-item">Band</li>
    <li class="list-group-item">Date Posted</li>
    <li class="list-group-item">Downloads</li>
    <li class="list-group-item">YouTube</li>
    <li class="list-group-item">MP3</li>
  </ul>
  <ul :key="item.id" class="list-group list-inline" v-for="item in items">
    <li class="list-group-item">
      {{item.title}}
    </li>
    <li class="list-group-item">
      {{item.original_band}}
    </li>
    <li class="list-group-item">
      {{item.date_posted}}
    </li>
    <li class="list-group-item mZip">
      <a v-bind:href="''+item.download_midi_tabs+''" target="_blank"></a>
    </li>
    <li class="list-group-item mYt">
      <a v-bind:href="''+item.youtube_link+''" target="_blank"></a>
    </li>
    <li class="list-group-item mAudio">
      <a v-bind:href="''+item.download_guitar_m4v+''" target="_blank"></a>
    </li>
  </ul>
  <pagination :records="288" :per-page="30" @paginate="getPostsViaREST"></pagination>
</div>
</template>

<script>
import axios from 'axios'
import {Pagination} from 'vue-pagination-2'

export default {
  name: 'App',
  data: function () {
    return {
      items: [{
        title: '',
        original_band: '',
        date_posted: '',
        download_midi_tabs: '',
        youtube_link: '',
        download_guitar_m4v: ''
      }]
    }
  },
  created: function () {
    this.getPostsViaREST()
  },
  methods: {
    getPostsViaREST: function () {
      axios.get('http://local.sites/getSongs.php')
        .then(response => { this.items = response.data })
    }
  },
  components: {
    Pagination
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
a {
  color: #999;
}
.current {
  color: red;
}
ul {
  padding: 0;
  list-style-type: none;
}
li {
  display: inline;
  margin: 5px 5px;
}
ul.list-group:after {
  clear: both;
  display: block;
  content: "";
}

.list-group-item {
  float: left;
}
.list-group li{
  max-width: 30%;
  min-width: 50px;
  min-height: 48px;
  max-height: 48px;
}
.list-group li:first-child{
  width: 200px;
  cursor: pointer;
}
.list-group li:nth-child(2){
  width: 200px;
}
.list-group li:nth-child(3){
  width: 110px;
}
.list-group li:nth-child(4){
  width: 48px;
}
.list-group li:nth-child(5){
  width: 48px;
}
.list-group li:last-child{
  width: 48px;
}
.mZip{
  background: url("http://www.kronusproductions.com/songs_angular/assets/images/mZip.png");
  display: block !important;
  max-width: 48px;
  height: 48px;
  cursor: pointer;
}
.mYt{
  background: url("http://www.kronusproductions.com/songs_angular/assets/images/youtube-icon_48x48.png");
  display: block !important;
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.mAudio{
  background: url("http://www.kronusproductions.com/songs_angular/assets/images/volume.png");
  display: block !important;
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.mZip a{
  display: block !important;
  width: 48px;
  height: 48px;
}
.mYt a{
  display: block !important;
  width: 48px;
  height: 48px;
}
.mAudio a{
  display: block !important;
  width: 48px;
  height: 48px;
}
.mHeaders li{
  background-color: cornflowerblue;
  font-size: 0.85rem;
  color: white;
}

Answer 1

好的 - 这有点像 hack，但它确实有效。

The following URL is a working example:

在 index.html 文件中需要一些老式原生 JavaScript 的帮助。首先，我需要能够读取包含来自 JSON 的条目数的隐藏字段，然后将所有 UL 设置为不显示 - setTimeout 是为了确保 JSON 文件已加载

 <script type="text/javascript">
  var mTO = setTimeout(function () {
    for (var x = 31; x <= $(".numRows").val() - 1; x++) {
      if (typeof (document.getElementById('sp_' + x)) === 'undefined') {

      } else {
        document.getElementById('sp_' + x).style.display = 'none'
      }
    }
  }, 1000);
  mTO;
</script>

然后调用一个计算的用户创建的方法来设置 this.mVar 为元素/条目/属性的数量——你想用什么名字——让 Vue 知道有多少元素，这样我们就可以划分按要分页的页数

computed: {
mFunc: function () {
  this.mVar = Object.keys(this.items).length
  return Object.keys(this.items).length
}

}

这是上述技巧的另一部分 - 根据在分页部分中单击的页面，这决定了要隐藏什么以及要显示什么

setPage: function (page) {
  this.page = page
  // console.log(page)
  for (var y = 0; y <= this.mVar - 1; y++) {
    if (typeof (document.getElementById('sp_' + y)) === 'undefined') {

    } else {
      document.getElementById('sp_' + y).style.display = 'none'
    }
  }
  for (var x = (30 * (this.page - 1)); x <= 30 * (this.page); x++) {
    if (typeof (document.getElementById('sp_' + x)) === 'undefined' || (document.getElementById('sp_' + x)) == null) {
      break
    } else {
      document.getElementById('sp_' + x).style.display = 'block'
    }
  }
}

如果您想知道“30”是什么意思，那就是我想在每页显示的 UL 数量。

hack 的最后一部分在模板部分中

<pagination :records="mFunc" :per-page="30" @paginate="setPage"></pagination>
<span style="display: none;"><input type="hidden" class="numRows" :value="this.mVar" /></span>

如果你想使用整个，那么你可以在我的github上找到它：

Github repo for vuejs-example