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

好-这有点不合常理，但是可以。

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数量。

黑客的最后一部分位于模板部分

<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

vue-pagination-2无法正常工作

1 个答案: