vue-table
vue-table copied to clipboard
ratiw
laravel 5.3.* zero rows problem
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: "[email protected]",
created_at: "2016-09-21 01:09:43",
updated_at: "2016-09-21 01:09:43"
},
Thank you!
It works after changed response.body to response.data in the loadData method. Don't know what the problem is?
@selmonal How did you import vue-resource? Via a <script> tag or using import?
@ratiw Same issue here. I'm loading vue-resource via require('vue-resource).
@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;
});
});
@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.
@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.
@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.
@WayneHarris Thanks , its work correctly , It took whole my afternoon, thanks
@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.
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
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+.
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.
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