Vue-tables-2: Receiving "data.json is not a function" error

[humblecoder]

- Vue.js version: 2.4.2
-Laravel version: 5.5
- consumed using: webpack / laravel mix
- FULL error message (including stack trace):

vue.app.js:76815 Uncaught (in promise) TypeError: data.json is not a function
at VueComponent. (vue.app.js:76815)
at
(anonymous) @ vue.app.js:76815
Promise rejected (async)
created @ vue.app.js:78209
callHook @ vue.app.js:3624
Vue._init @ vue.app.js:5068
VueComponent @ vue.app.js:5237
createComponentInstanceForVnode @ vue.app.js:4586
init @ vue.app.js:4420
createComponent @ vue.app.js:5969
createElm @ vue.app.js:5912
createChildren @ vue.app.js:6040
createElm @ vue.app.js:5945
createChildren @ vue.app.js:6040
createElm @ vue.app.js:5945
patch @ vue.app.js:6375
Vue._update @ vue.app.js:3384
updateComponent @ vue.app.js:3507
get @ vue.app.js:3846
Watcher @ vue.app.js:3829
mountComponent @ vue.app.js:3511
Vue$3.$mount @ vue.app.js:8639
Vue$3.$mount @ vue.app.js:10738
init @ vue.app.js:4426
createComponent @ vue.app.js:5969
createElm @ vue.app.js:5912
patch @ vue.app.js:6375
Vue._update @ vue.app.js:3384
updateComponent @ vue.app.js:3507
get @ vue.app.js:3846
Watcher @ vue.app.js:3829
mountComponent @ vue.app.js:3511
Vue$3.$mount @ vue.app.js:8639
Vue$3.$mount @ vue.app.js:10738
init @ vue.app.js:4426
createComponent @ vue.app.js:5969
createElm @ vue.app.js:5912
createChildren @ vue.app.js:6040
createElm @ vue.app.js:5945
createChildren @ vue.app.js:6040
createElm @ vue.app.js:5945
patch @ vue.app.js:6375
Vue._update @ vue.app.js:3384
updateComponent @ vue.app.js:3507
get @ vue.app.js:3846
Watcher @ vue.app.js:3829
mountComponent @ vue.app.js:3511
Vue$3.$mount @ vue.app.js:8639
Vue$3.$mount @ vue.app.js:10738
init @ vue.app.js:4426
createComponent @ vue.app.js:5969
createElm @ vue.app.js:5912
createChildren @ vue.app.js:6040
createElm @ vue.app.js:5945
createChildren @ vue.app.js:6040
createElm @ vue.app.js:5945
patch @ vue.app.js:6375
Vue._update @ vue.app.js:3384
updateComponent @ vue.app.js:3507
get @ vue.app.js:3846
Watcher @ vue.app.js:3829
mountComponent @ vue.app.js:3511
Vue$3.$mount @ vue.app.js:8639
Vue$3.$mount @ vue.app.js:10738
init @ vue.app.js:4426
createComponent @ vue.app.js:5969
createElm @ vue.app.js:5912
createChildren @ vue.app.js:6040
createElm @ vue.app.js:5945
patch @ vue.app.js:6375
Vue._update @ vue.app.js:3384
updateComponent @ vue.app.js:3507
get @ vue.app.js:3846
Watcher @ vue.app.js:3829
mountComponent @ vue.app.js:3511
Vue$3.$mount @ vue.app.js:8639
Vue$3.$mount @ vue.app.js:10738
init @ vue.app.js:4426
createComponent @ vue.app.js:5969
createElm @ vue.app.js:5912
patch @ vue.app.js:6411
Vue._update @ vue.app.js:3384
updateComponent @ vue.app.js:3507
get @ vue.app.js:3846
Watcher @ vue.app.js:3829
mountComponent @ vue.app.js:3511
Vue$3.$mount @ vue.app.js:8639
Vue$3.$mount @ vue.app.js:10738
Vue._init @ vue.app.js:5078
Vue$3 @ vue.app.js:5163
(anonymous) @ vue.app.js:11565
__webpack_require__ @ vue.app.js:20
(anonymous) @ vue.app.js:57734
__webpack_require__ @ vue.app.js:20
module.exports.list @ vue.app.js:66
(anonymous) @ vue.app.js:69

- relevant code:
Very basic implementation with absolutely no customization
import {ServerTable, ClientTable, Event} from 'vue-tables-2';
import Vue from 'vue'
Vue.use(ServerTable)

- steps for reproducing the issue:
Server simply returns a JSON response with a "data" array of row objects and "count"

-Sample data:

{
"count": 5,
"data": [
{
"id": "16F74AB24D844C078593687B",
"name": "Domenick Center",
"description": "Omnis incidunt et repellat rerum harum omnis. Voluptas sed fugiat saepe placeat nihil eum repudiandae. Ad quas sit suscipit ipsa nesciunt voluptatem. Architecto dolorem aut delectus eum eligendi corrupti.",
"created_by": 1,
"street_address": "9537 Marks Road",
"city": "Lake Francoburgh",
"state_province": "Louisiana",
"postal_code": "78289",
"status": "open",
"created_at": "2017-08-08 04:54:01",
"updated_at": "2017-08-08 04:54:01",
"deleted_at": null
},
{
"id": "45637A6F65F44BC68809719F",
"name": "Sedrick Stream",
"description": "Incidunt eum nihil quae omnis. Dolorem pariatur dolorum rerum labore cupiditate. Sit minus quam id. Esse autem ea in eaque deleniti cupiditate.",
"created_by": 1,
"street_address": "14496 Nya Common",
"city": "Yundtborough",
"state_province": "New Mexico",
"postal_code": "48564-3125",
"status": "open",
"created_at": "2017-08-08 04:54:01",
"updated_at": "2017-08-08 04:54:01",
"deleted_at": null
},
{
"id": "78373E1027E2469D8B2BDC16",
"name": "Kozey Harbor",
"description": "Quibusdam voluptate atque temporibus aut. Quidem ipsam rerum ut doloremque. Et accusantium alias ullam et aliquid. Veniam officia odit ut vel fuga. Quia voluptatem id dignissimos ut.",
"created_by": 1,
"street_address": "589 McKenzie Harbors",
"city": "South Kathrynemouth",
"state_province": "Idaho",
"postal_code": "07046-2731",
"status": "open",
"created_at": "2017-08-08 04:54:01",
"updated_at": "2017-08-08 04:54:01",
"deleted_at": null
},
{
"id": "BBCEFAC1A12143DBB00066C0",
"name": "Jakubowski Centers",
"description": "Laudantium maiores ut ut facere omnis. Impedit voluptatem expedita sint unde repudiandae. Beatae ex molestias ab accusantium. Ea inventore non exercitationem consequuntur dolore dolor.",
"created_by": 1,
"street_address": "628 Flatley Gateway",
"city": "New Reginald",
"state_province": "Massachusetts",
"postal_code": "02382",
"status": "open",
"created_at": "2017-08-08 04:54:01",
"updated_at": "2017-08-08 04:54:01",
"deleted_at": null
},
{
"id": "E52CDE7A77654B9ABD82EF65",
"name": "Michel Court",
"description": "Sint voluptatem perferendis autem inventore. Et distinctio hic delectus sunt voluptatibus dignissimos. Ut excepturi aut omnis recusandae ut. Quaerat odit et sed hic ut facere labore.",
"created_by": 1,
"street_address": "848 Spencer Harbors",
"city": "East Taureanshire",
"state_province": "North Carolina",
"postal_code": "11912",
"status": "open",
"created_at": "2017-08-08 04:54:01",
"updated_at": "2017-08-08 04:54:01",
"deleted_at": null
}
]
}

[humblecoder]

UPDATE
Consider the code inside "send-request.js":

if (typeof this.$http !== 'undefined') return this.$http.get(this.url, { params: data }).then(function (data) {
return data.json();
}.bind(this), function (e) {
this.dispatch('error', e);
}.bind(this));

It appears that instead of returning data.json() (which is invalid), you need to return data.data. I'm not sure this is the official "fix", but it works in my case.

[matfish2]

As stated in the docs, in case you choose to use vue-resource, the minimum version is 0.9.0. The API has changed since this release from data.data to data.json()

[humblecoder]

Apologies for being obtuse, but, I'm using vue-tables-2 (not 1) and I see nothing about "data.json". That said, I did need to update my current version of Axios, and now I'm receiving "data.map is not a function". Again, I'm sure there's something simple being missed, but I don't see it.

[matfish2]

I meant the minimum version of vue-resource, but since you are using axios that isn't relevant.

Can you log response and response.data in get-response-data.js? I want to see what is returned from the server.

[humblecoder]

See attached file
debug.txt

[kangfenmao]

axios is not work. data.json is not a function

[matfish2]

If you get data.json is not a function it means that axios is not available at the global window scope, and thus cannot be found by the plugin, which then resorts to vue-resource, of which you probably have an old version (below 0.9).
So try:

window.axios = require('axios');

[jblotus]

would it be possible to provide a direct reference to axios as opposed to pulling from window? possible something that could be configured when calling Vue.use()

perhaps this is already possible with a custom global request funciton?