Как включить vue-pagination-2 на страницу проекта vue-cli с простым списком

Я новичок Vuejs, поэтому, пожалуйста, будьте нежны.

У меня есть приложение, созданное с помощью Vue-Cli.

Теперь я пытаюсь выяснить, как включить vue-pagination-2 ( https://github.com/matfish2/vue-pagination-2) в компонент в моем приложении.

Я хочу, чтобы я мог отображать 10 записей за раз на странице. Пример репо Matfish не очень мне помогает. И у меня самое сложное время найти примеры для этого плагина онлайн.

Вот весь код моих компонентов (без материала таблицы стилей)...

<template>
  <div id="cat-list-table">
    <div class="page-heading">List of Pets</div>
    <transition name="fade1" appear="">
      <div class="divTable">
        <div class="divTableHeading">
          <div class="divTableRow">
            <div class="divTableHead col-sm-1">&nbsp</div>
            <div class="divTableHead col-sm-2">Name</div>
            <div class="divTableHead col-sm-2">gender</div>
            <div class="divTableHead col-sm-2">&nbsp</div>
            <div class="divTableHead col-sm-4">Date Added</div>
          </div>
        </div>
        <transition-group tag="div" name="fade2" class="divTableBody" appear="">
          <div class="divTableRow fadecontent" v-for="cat in cats" :key="cat.id">
            <div class="divTableCell image"><img v-bind:src="cat.photo" width="40px" height="40px" alt=""></div>
            <div class="divTableCell"><router-link :to="{path:'/cat/' + cat.id}" >{{ cat.name }}</router-link></div>
            <div class="divTableCell">{{ cat.gender }}</div>
            <div class="divTableCell"></div>
            <div class="divTableCell">{{ cat.created | moment("MM-DD-YYYY h:MM a")}}</div>
          </div>
        </transition-group>
      </div>
    </transition>
  </div>
</template>

<script>
  import axios from 'axios';
  import { Observable } from 'rxjs';

  export default {
    name: 'CatList',
    data() {
      return {
        cats: [],
        page: 1,
        CatIndex: 0,
      }
    },
    mounted(){},
    subscriptions() {
      const cats$ = Observable.from(axios.get(`${process.env.KITTY_URL}/api/v1/cats/`)
        .catch(error => console.log(error)))
        .pluck("data","results");
      return{cats: cats$}
    },
  }
</script>
<style>...</style> (style sheet stuff removed for brevity)

Можете ли вы помочь мне понять, как заставить это работать? Или даже укажите мне более подробные примеры в Интернете, показывающие, как использовать этот плагин с приложением vue-cli?

Спасибо за любую помощь -_^

0 ответов

Другие вопросы по тегам