Please excuse my ignorance as a new web developer, but I can't seem to get the <b-paginate>
component to work in my single file Django and Vue 2 app. I access Bootstrap Vue via CDN.
This is my component, which is placed directly above my main Vue app:
let paginationComponent = Vue.component('pagination-component', {
name: 'paginationComponent',
props:['pantryItems'],
template:`<div class="overflow-auto"><b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-text="First"
prev-text="Prev"
next-text="Next"
last-text="Last"
class="mt-4"
></b-pagination></div>`,
data: function() {
return {
rows: this.pantryItems.length,
perPage: 10,
currentPage: 1,
}
},
computed: {
rows: function() {
return this.pantryItems.length
}
}
})
and this is my Vue root app:
let mypantryapp = new Vue ({
el: "#app",
delimiters: ['[[', ']]'],
components: {'pagination-component': paginationComponent},
data: {
pantryItems: [],
name: '',
users: [],
itemName: '',
createdDate: '',
expirationDate: '',
csrf_token: '',
itemErrors: {currentUser: false},
currentUser: {id: false},
owner: '',
itemImgs: [],
tags: [],
by_category: false,
grocery_view: false,
...followed by a bunch of unrelated methods for my pantry inventory app.
This is how I call it in my HTML:
<b-pagination :pantry-items='pantryItems' ></b-pagination>
The component renders on the page with just the number 1 in the middle of the pagination button group and all other buttons greyed out.