New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

laravel 5.3.* zero rows problem #100

Open
selmonal opened this Issue Sep 21, 2016 · 20 comments

Comments

Projects
None yet
5 participants
@selmonal

selmonal commented Sep 21, 2016

Hello

i've tested below but it displays zero rows. Displaying 0 to 0 of 0 items

<vuetable
    api-url="/api/users"
    table-wrapper="#content"
    data-path="data"
    pagination-path=""
    :fields="columns"
></vuetable>

json data be like this

{
total: 101,
per_page: 15,
current_page: 1,
last_page: 7,
next_page_url: "http://vue.dev/api/users?page=2",
prev_page_url: null,
from: 1,
to: 15,
data: [
{
id: 1,
name: "example",
email: "example@gmail.com",
created_at: "2016-09-21 01:09:43",
updated_at: "2016-09-21 01:09:43"
},

Thank you!

@selmonal

This comment has been minimized.

selmonal commented Sep 21, 2016

It works after changed response.body to response.data in the loadData method. Don't know what the problem is?

@ratiw

This comment has been minimized.

Owner

ratiw commented Sep 21, 2016

@selmonal How did you import vue-resource? Via a <script> tag or using import?

@WayneHarris

This comment has been minimized.

WayneHarris commented Sep 21, 2016

@ratiw Same issue here. I'm loading vue-resource via require('vue-resource).

@WayneHarris

This comment has been minimized.

WayneHarris commented Sep 21, 2016

@ratiw @selmonal Adding a interceptor to vue-resource will resolve it in the short term.

Not sure how suitable this is as a fix due to the side effects.

Vue.http.interceptors.push((request, next) => {
    next((response) => {
        response.body = response.data;
    });
});
@ratiw

This comment has been minimized.

Owner

ratiw commented Sep 21, 2016

@selmonal @WayneHarris What I see is the mismatch of vue-resource version. Before version 0.9, it uses response.data (vuetable earlier than v1.5.3 uses vue-resource v0.7). But version 0.9 onward, vue-resource API has changed to response.body (vuetable v1.5.3 uses vue-resource v1.0.2)

Recently, @Jasper9041 has submitted a PR to switch from vue-resource v0.7 to v1.0.2. But I was unable to make it work because of the response.body problem as I tested with the examples. Then I realized that I use <script> tag to include v0.7 from CDNJS in those examples. Once updated, they are working as expected. That's why I asked you about the version of vue-resource you're using.

As I see that the problem you mentioned is based on the missing of ether response.data or response.body.

Also, loading the different version in different place in the project might cause some issues. Please check for that as well.

@WayneHarris

This comment has been minimized.

WayneHarris commented Sep 22, 2016

@ratiw Laravel 5.3 is using vue-resource ^0.9.3. Testing it now with ^1.0.2 but getting 401 Unauthorized issues using Laravel Passport for the API. Will let you know how I get on.

@WayneHarris

This comment has been minimized.

WayneHarris commented Sep 22, 2016

@ratiw So to resolve the 401 when you update the vue-resource in Laravel to 1.0.2. You will need to update the bootstrap.js in Laravel to set the X-CSRF-TOKEN correctly.

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

Made a pull request to Laravel.

@demohunter26

This comment has been minimized.

demohunter26 commented Sep 22, 2016

@WayneHarris
Thanks , its work correctly ,
It took whole my afternoon,
thanks

@ratiw

This comment has been minimized.

Owner

ratiw commented Sep 22, 2016

@WayneHarris Thanks for the help and the explaination. :)

@a119347

This comment has been minimized.

a119347 commented Sep 23, 2016

I have the same probleme,i got the json data, but it displays zero rows

@ratiw

This comment has been minimized.

Owner

ratiw commented Sep 23, 2016

@a119347 Have you tried anything from above?

@a119347

This comment has been minimized.

a119347 commented Sep 23, 2016

Yes , but i used webpack and es6 , and no error appear.

@ratiw

This comment has been minimized.

Owner

ratiw commented Sep 23, 2016

@a119347 This is the problem of using different version of vue-resource. It has nothing to do with webpack and es6. So, check the version of vue-resource you're using in your code first.

@a119347

This comment has been minimized.

a119347 commented Sep 23, 2016

First i and my partner use the 0.9.3, he display the data , but i can't , now i update the 1.0.2

@ratiw

This comment has been minimized.

Owner

ratiw commented Sep 23, 2016

Don't forget to npm update. If you're using vuetable v1.5.3, it will required vue-resource 1.0.2. If you're using vuetable version earlier than v1.5.3, it uses vue-resource 0.7.4. There is an internal API change in vue-resource v.0.9+.

@a119347

This comment has been minimized.

a119347 commented Sep 23, 2016

i using vuetable v1.5.2 and vue-resource 0.9.3 now

@ratiw

This comment has been minimized.

Owner

ratiw commented Sep 23, 2016

Recommend update to v1.5.3 and vue-resource 1.0.2, or downgrade vue-resource to v0.7.4.
Version v.0.9.3 already API has already changed and will not work correctly with v.1.5.2.

@a119347

This comment has been minimized.

a119347 commented Sep 23, 2016

But my partners alsoe use the vuetable v1.5.2 and vue-resource 0.9.3 , he can display the data , I will try change the version thx

@a119347

This comment has been minimized.

a119347 commented Sep 23, 2016

i update to v1.5.3 and vue-resource1.0.3 it works

@ratiw

This comment has been minimized.

Owner

ratiw commented Sep 23, 2016

Will update README to warn about this. Sorry, for the inconveniences.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment