ratiw / vue-table

data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
MIT License
1.83k stars 303 forks source link

laravel 5.3.* zero rows problem #100

Closed myagmarsurensedjav closed 2 years ago

myagmarsurensedjav commented 7 years ago

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!

myagmarsurensedjav commented 7 years ago

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

ratiw commented 7 years ago

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

WayneHarris commented 7 years ago

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

WayneHarris commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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.

masoodhazrati commented 7 years ago

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

ratiw commented 7 years ago

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

yantaosh commented 7 years ago

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

ratiw commented 7 years ago

@a119347 Have you tried anything from above?

yantaosh commented 7 years ago

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

ratiw commented 7 years ago

@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.

yantaosh commented 7 years ago

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 commented 7 years ago

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+.

yantaosh commented 7 years ago

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

ratiw commented 7 years ago

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.

yantaosh commented 7 years ago

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

yantaosh commented 7 years ago

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

ratiw commented 7 years ago

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