laravel vue 分页返回无效的道具类型检查失败的道具

Question

我开始使用 nuxt js 并安装了laravel-vue-pagination插件，但我不知道为什么在控制台系统上收到此错误消息：

[Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Array 

这是我的代码：

getResults (page = 0) {
  this.$axios.$get('mydomain.com/api/Customer/loadCustomers/' + page).then((response) => {
    this.laravelData = response.data
  })
},

这是我的数据：

data () {
return {
  laravelData: {},
  formFields: {},
  search: null,
  editMode: true,
  customerId: null,
  refresh: false
}
}

HTML页面代码：

<pagination :data="laravelData" @pagination-change-page="getResults" />

我也已经使用以下方法注册了组件：

import Vue from 'vue'
Vue.component('pagination', require('laravel-vue-pagination'))

我的 json 反馈：

{
"success": false,
"total": 6,
"per_page": 10,
"current_page": 0,
"last_page": 1,
"data": [
    {
        "id": "34",
        "customer_name": "Philippe Lesen",
        "customer_company_name": "doxydiwapo@mailinator.com",
        "customer_email": "musybecapa@mailinator.net",
        "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
     }
]
 }

Answer 1

我使用this.laravelData = response解决了这个问题

Answer 2

你解决了这个问题。 这就是为什么...

您将 laravelData 声明为一个对象

 laravelData: {},

但你分配它

this.laravelData = response.data

到一个数组

"data": [

您的另一个解决方法可能是将您的 laravalData 声明为一个数组，也许您只会看到看起来像您想要的数据。

 laravelData: [],