vue-pagination-2 не работает - PullRequest
Новая
       9

vue-pagination-2 не работает

0 голосов
/ 03 июля 2018

Я новичок в 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;
}

1 Ответ

0 голосов
/ 04 июля 2018

ОК - это что-то вроде хака, но это работает.

Следующий URL-адрес является рабочим примером:

Требуется помощь от какого-то старого, родного JavaScript-кода в файле index.html. Во-первых, мне нужно было иметь возможность прочитать скрытое поле, содержащее количество записей, поступающих из 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-репо для vuejs-example

...