Как включить 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"> </div>
<div class="divTableHead col-sm-2">Name</div>
<div class="divTableHead col-sm-2">gender</div>
<div class="divTableHead col-sm-2"> </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?
Спасибо за любую помощь -_^