Recently, I delved into working with Nuxt.js and decided to install the Laravel-Vue-Pagination plugin. However, I encountered an error message in my console system that reads:
[Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Array
Here is a snippet of my code causing the issue:
getResults (page = 0) {
this.$axios.$get('mydomain.com/api/Customer/loadCustomers/' + page).then((response) => {
this.laravelData = response.data
})
},
Below is how I structured my data:
data () {
return {
laravelData: {},
formFields: {},
search: null,
editMode: true,
customerId: null,
refresh: false
}
}
Here's the HTML code snippet where I use the pagination component:
<pagination :data="laravelData" @pagination-change-page="getResults" />
I made sure to register the components by using this import statement:
import Vue from 'vue'
Vue.component('pagination', require('laravel-vue-pagination'))
Additionally, here is a glimpse of the JSON feedback I received:
{
"success": false,
"total": 6,
"per_page": 10,
"current_page": 0,
"last_page": 1,
"data": [
{
"id": "34",
"customer_name": "Philippe Lesen",
"customer_company_name": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbbb0a7a6bbb6a8beafb09fb2beb6b3b6b1beabb0adf1bcb0b2">[email protected]</a>",
"customer_email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="771a02040e151214160716371a161e1b1e191603180559191203">[email protected]</a>",
"customer_phone": "+4382251059",
"customer_fax": "+1 (223) 134-7141",
"customer_mobile": "+4382251059",
"customer_website": "https://www.qusopywode.org.au",
"customer_type": "2",
"billing_address": "Cupiditate alias asp",
"billing_city": "Delectus reprehende",
"billing_state": "In velit illo ut vol",
"billing_zip": "73660",
"billing_country": "TH",
"shippingaddr_id": null,
"currency": "EUR",
"sales_representative": null,
"payment_condition": null,
"payment_method": null,
"tax_preference": "1",
"invoice_notification": "1",
"note": null,
"status": null
}
]
}