How do you use the Laravel implementation?

[jackmcdade]

There are no docs at all.

[matfish2]

1. Include the file in your project.
2. Set the correct namespace.
3. In your controller instantiate the class like so: $vuetables = new EloquentVueTables; (import the file on top with a use statement)
4. return the result: return $vuetables->get(new SomeModel, ['field_a','field_b'])

If you are using L5 you need to replace the Input class on line 12 with the Request one.

[jackmcdade]

Okay, so i was on the right track. I just kept hitting errors and wondered if I was way off base somehow.

I do keep getting SQL errors though.

2/2
QueryException in Connection.php line 673:
SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '0' at line 1 (SQL: select `first_name`, `last_name`, `email` from `users` offset 0)

[jackmcdade]

It seems the logic dictates that a limit must be set, though it isn't documented anywhere.

[jackmcdade]

I hacked on it a bit and got the query to run, but the component's tbody is empty, even though it has all the matching data necessary.

[matfish2]

limit IS sent, along with all the other params, from the client side, as specified in the docs. Check two things:

1. Make sure you get a 200 response with the correct keys and data (data and count)
2. Use vue-resource version 0.9.0 or greater.

[jackmcdade]

Data is correct and vue-resource is 0.9.0. Still no rows.

[matfish2]

Are there any errors in the console?

[jackmcdade]

main.js:19269 Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined(…)

[jackmcdade]

Here's a more verbose look:

[matfish2]

mmm. The guy from Issue #73 had the same problem. I wasn't able to replicate it so far on my end. What browser are you using? Which build tool?

[jackmcdade]

Chrome and Browserify with Laravel-Elixir-Vueify.

[matfish2]

And what version of vue?

[jackmcdade]

Vue 1.0.24 - and just upgraded to 1.0.26 with no difference.

[matfish2]

I'm using the exact same settings. Is the component nested within another?

[jackmcdade]

Nope, no nested components.

[matfish2]

Can you paste in the relevant HTML and JS?

[jackmcdade]

Are there any required options? I'm not setting any.

The template:

<v-server-table url="/admin/api/users" :columns="columns"></v-server-table>

The JS:

new Vue({
    el: '#app',
    data: {
        columns: ['first_name', 'last_name', 'email']
    }
});

The route:

    public function getUsers()
    {
        $vuetable = new EloquentVueTables();

        return $vuetable->get(new User, ['first_name', 'last_name', 'email']);
    }

The API response:

[matfish2]

No required options. Can you add a console.log(this.customColumns) in the file add-custom-columns.js and paste the result?

[jackmcdade]

An empty array [].

[matfish2]

That is correct. What about this.data in the same file?

[jackmcdade]

undefined

[matfish2]

Ok. so there is a problem with assigning the data returned from the server. Let's look at the raw response. Log data on v-server-table.js line 59. The response itself should be nested inside the data property (data.data)

[jackmcdade]

Response {url: "/admin/api/users?limit=2&query=&limit=10&orderBy=first_name&ascending=1&page=1&byColumn=0", body: "{"data":[{"first_name":"Apple","last_name":"Bees",…name":"Two","email":"three@four.com"}],"count":8}", headers: Object, status: 200, statusText: "OK"…}
body
:
"{"data":[{"first_name":"Apple","last_name":"Bees","email":"fake@italian.biz"},{"first_name":"Booker","last_name":"Washington","email":"jack@jackmcdade.com"},{"first_name":"Carver","last_name":"Fours","email":"carver@hackmcdade.com"},{"first_name":"Jack","last_name":"McDade","email":"jack@wilderborn.com"},{"first_name":"Jack","last_name":"One","email":"jack+test@jackmcdade.com"},{"first_name":"Joe","last_name":"TWO","email":"joe@jackmcdade.com"},{"first_name":"Me","last_name":"three","email":"me@you.com"},{"first_name":"One","last_name":"Two","email":"three@four.com"}],"count":8}"
data
:
"{"data":[{"first_name":"Apple","last_name":"Bees","email":"fake@italian.biz"},{"first_name":"Booker","last_name":"Washington","email":"jack@jackmcdade.com"},{"first_name":"Carver","last_name":"Fours","email":"carver@hackmcdade.com"},{"first_name":"Jack","last_name":"McDade","email":"jack@wilderborn.com"},{"first_name":"Jack","last_name":"One","email":"jack+test@jackmcdade.com"},{"first_name":"Joe","last_name":"TWO","email":"joe@jackmcdade.com"},{"first_name":"Me","last_name":"three","email":"me@you.com"},{"first_name":"One","last_name":"Two","email":"three@four.com"}],"count":8}"
headers
:
Object
ok
:
true
status
:
200
statusText
:
"OK"
url
:
"/admin/api/users?limit=2&query=&limit=10&orderBy=first_name&ascending=1&page=1&byColumn=0"

[jackmcdade]

It looks like data is no longer an object when it goes through setData(). data.data is undefined.

[jackmcdade]

Yeah that's definitely the source of the issue. If i do var data = JSON.parse(data.data); at line 60 there, the table loads up fine. All the features don't work though since that parse isn't at the component level.

[matfish2]

I see that. This is my log, using vue-resource 0.9.0. As you can see my data is an object.

[jackmcdade]

So where does the issue lie? My GET response is a valid JSON object.

[matfish2]

I am as baffled as you are...

[jackmcdade]

[jackmcdade]

[matfish2]

I suppose I can temporarily add a hacky if statement to parse as json if the response is a string.

[jackmcdade]

Might be the best choice until it can be sorted out more clearly.

[jackmcdade]

What if you replaced calls to the getData() response where you reference data.data with data.json()? That's the Vue Resource method for ensuring JSON.

[jackmcdade]

Yeah, i just tried that locally by updating v-server-table.js, order-by-column.js, search.js and set-page.jsand everything seems to be working properly.

[matfish2]

Great. I will update and upload shortly.

[fleiflei]

lol..been having the same forEach error message as jack while browsing the repo for a solution...reading through this thread, while slowly realizing that this is happening right at this moment..hit F5 repeatedly to check if your comments timestamps were real...haha...never had this coincidence before...

HOWEVER...I do have the same error message as Jack...I hope I'm not hijacking this issue but it seems related...I am trying to use the server component and have the server (laravel 5) all set up (returning 'data' array and 'count' only)...however it gives me this error: Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined

Thanks!

[matfish2]

Please install the fix (1.4.51). Hopefully it did the trick.

[jackmcdade]

Boom. That it did.

I'll be sending you a PR for the Laravel implementation if you're up for it.

[fleiflei]

Bingo bongo! Does work for me now, too! Cheers guys, been a pleasure...

[matfish2]

Sure. I wrote it for L4. It might need some extra tweaking for L5.

[popozhu]

hi, I use the lastest dist single file version with vue-resource 0.9.3, and get the same error when I call refresh or use the customFilters(used to work with the vue-resource 0.8.x and with the old vue-tables 1.4.0 version), but it was ok for the first time loading data from server (php backend, which return the data array and a count)

so I wonder if the dist file is not the lastest one... and would you please upload the full version of vue-tables.js too, thanks. And the lastest one's MD5 I used is:

MD5(vue-tables.min.js)= 257f2407982a82b340310346d5aa8efa

[matfish2]

I have compiled the fix into the minified file. Just double checked by looking there for the latest change (calling data.json 4 times) and found it. You can see that it was changed in the latest commit: https://github.com/matfish2/vue-tables/commit/2dd28ea0c49f4283bc0ac95503cbf0bc3a6cf8b1 Might be a caching issue.

[popozhu]

I look into the error in Chrome just now, and found the problem:

https://github.com/matfish2/vue-tables/blob/master/lib/v-server-table.js#L84

this line also needs to be changed from data.data to data.json and it solved my problem

and after thecking the project, vue-tables/lib/methods/set-data.js is also still using the data.data

popozhu lib $ find ./ -name "*.js" | xargs grep 'data.data'
.//methods/set-data.js:  this.data = data.data;
.//v-server-table.js:        this.setData(data.data);

[matfish2]

Thank you. You are right about the call in v-server-table.js, But the data.data in set-data.js is called on the the response data itself (i.e what data.json() returns) which is comprised of the data and count keys. I will upload a fix momentarily.