Closed dainemedia closed 2 years ago
understand that this only a [Vue-Warn] but its would be nice if it can compatible with the laravel json response (without any warn shown)
I've just tested this with the latest version of Laravel and couldn't recreate the issue. I've updated the README.md to be more in line with current Vue/Laravel standards (i.e. using axios instead of vue-resource). Maybe having a look at the refreshed README.md might help?
The only things I can think of that might be causing this issue:
response.data
and not just the response
itself.data
array from the paginator response instead of the whole response object.getResults(page = 1) {
axios.get('example/results?page=' + page)
.then(response => {
this.laravelData = response.data;
});
}
In this example:
response
is the axios response objectresponse.data
is the Laravel paginator object (the one you need)response.data.data
is the data
array inside the Laravel paginator objectI'm using the latest laravel and also using the axios, you can check in my project https://github.com/GitzJoey/TKBARU/blob/master/resources/assets/js/apps/supplier.js (line 51)
I can provide you a test pen in my project github if want
I have this problem too...
This is my response:
{
current_page: 1,
data: Array(10),
first_page_url: "http://localhost:8000/admin/post?page=1",
from: 1,
last_page: 17,
...
}
Error:
[Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Array.
Btw:
With laravel 5.6.x
getResults(page = 1) {
axios.get('example/?page=' + page) // <-- this
.then(response => {
this.laravelData = response.data;
});
}
I had the same problem.
I solved it by making sure I changed this:
<li v-for="post in laravelData" ...
to this:
<li v-for="post in laravelData.data" ...
try to change initial value in data() from [] to {}.
nope. still showing the warn i tried
laravelData : Object laravelData.data : Object
laravelData : Array laravelData.data : Object
Can you share your code, maybe we can spot that issue for you?
@sunscreem https://github.com/GitzJoey/TKBARU/blob/master/resources/assets/js/apps/supplier.js
note: its standard live laravel project also if you care to run it (i can guide you to run it also)
@GitzJoey You see here:
Can you show me a console.log on this.supplierList
please?
I had the same issue but i was using a Resource to return my json then it gives you the output in this format instead of the norm.
From the Laravel Documentation
Data Wrapping And Pagination When returning paginated collections in a resource response, Laravel will wrap your resource data in a data key even if the withoutWrapping method has been called. This is because paginated responses always contain meta and links keys with information about the paginator's state:
https://laravel.com/docs/5.6/eloquent-resources#data-wrapping
@ettiennelouw Good shout. I've raised a separate issue for supporting Laravel's API Resources #22.
@sunscreem hi, sorry for late response, here;s the console.log on line 62
It's because your data
is an array. It should be an object.
Yours is like this
data : [10]
It should be
data : {}
For me, it fixed the warning.
I had the same problem.
I solved it by making sure I changed this:
<li v-for="post in laravelData" ...
to this:
<li v-for="post in laravelData.data" ...
This was also the fix for me
not work in laravel 5.5 larvael return default type of paginate , how i can convert it to object ?
Make sure you are setting the data in variable as object instead of array
Firstly variable in data should be having {} instead of []
change :
posts:[]
to
posts:{}
If you have data.data in http call:
axios.get("api/post").then(({ data }) => (this.posts = data.data));
Change it to :
axios.get("api/post").then(({ data }) => (this.posts = data));
and in loop
if you have this :
<tr v-for="post in posts" :key="post.id">
add the data here like this :
<tr v-for="post in posts.data" :key="post.id">
try to change initial value in data() from [] to {}.
its worked like a charm
try to change initial value in data() from [] to {}.
How do you do that properly?
I have the same error. I have solved with this.
<div v-if="posts.total > 0">
<pagination :data="posts" @pagination-change-page="getPaginationResults"></pagination>
</div>
1: instead [] use {}
2:
getResults(page = 1) { axios.get('example/?page=' + page) // <-- this .then(response => { this.laravelData = response.data; }); }
3:instead <tr v-for="post in posts" :key="post.id">
us <tr v-for="post in posts.data" :key="post.id">
Just a quick note about this issue:
TLDR; I'm sure this issue is related on how json_encode()
works and can be tweaked by passing it some options or taking care of the structure of data we sending the response
I've tested the following scenarios for passing data from a Laravel response to Vue component props:
Empty PHP Array:
An empty PHP Array will be converted to a JS empty Array.
// PHP
[]
// JS
[]
Associative PHP Array (with string index):
An associative PHP Array will be converted to a JS Object.
// PHP
[
'index1' => 'Hello',
'index2' => [ 'item1', 'item2' ]
]
// JS
{
index1: 'Hello',
index2: [ 'item1', 'item2' ]
}
This is the weird case, the prop is set to expect an Array, because that is what you are returning in the Laravel response, but get an object if the array has associative keys, and guess what? If the array is empty you get an array!
Multidimensional PHP Array (with numeric index):
A multidimensional PHP Array with numeric index will be converted to a JS Array
// PHP
[
[ 'name' => 'foo', 'messages' => [ 'message1', 'message2' ] ],
[ 'name' => 'bar', 'messages' => [ 'message1', 'message2' ] ],
]
// JS
[
{ name: 'foo', messages: [ 'message1', 'message2' ]},
{ name: 'bar', messages: [ 'message1', 'message2' ]},
]
You are declaring one type of list, and when you consume it from the API it goes over another type. To fix the problem, you can declare multiple forms of the list as: props: { data: [array, object] } in this way, Vuejs will read any list you can give!
I had had the same warning, and now it's working perfectly. juste replace data: [ ] by data: { }
@BoraVivek Answer worked for me. Thanks
I'm passing a prop from the laravel blade to vue component how can I convert it into an object ?
I'm not using axios..
props: ['data'], // always returning array
[Vue warn]: Error in render: "TypeError: Cannot read property 'data' of undefined"
i have some warning too, i am passing 2 tables from laravel to axios, how to make these 2 data into an object? i got no problem with other pagination with only 1 table passed
Controller :
public function index()
{
$groupOne = Santri::with('Asrama')->paginate(5);
$groupTwo = Asrama::all();
return (compact('groupOne', 'groupTwo'));
}
Santri.vue: getResults(page = 1) { axios.get('api/santri?page=' + page) .then(response => { this.santris = response.data; }); }, loadSantri(){ axios.get("api/santri").then(({ data }) => (this.santris = data ));
},
data(){ return { editMode: false, santris : { } }
I had the same issue but i was using a Resource to return my json then it gives you the output in this format instead of the norm.
From the Laravel Documentation
Data Wrapping And Pagination When returning paginated collections in a resource response, Laravel will wrap your resource data in a data key even if the withoutWrapping method has been called. This is because paginated responses always contain meta and links keys with information about the paginator's state:
https://laravel.com/docs/5.6/eloquent-resources#data-wrapping
I followed this solution to solve my problem by opting to use database views for all cases where i was using resources. Hope that helps someone having similar issues
I have solved the issue by wrapping the api response into: Object.assign({}, response);
use the following structure in your vue data:
dataItems: { data: [] }
get back your axios data
axios.get(yourApiUrl).then (res => {
this.dataItems = res.data
})
in your paging component set:
:data = "dataItems"
and to list your data in a table or html list use:
v-for="(item, key) in dataItems.data"
NOTE: works for paginated laravel responses and paginated laravel resources too, good luck!
So I was able to use Javascript Object.fromEntries()
method to parse the data to an Object since the package is reading it as an array.
Laravel Controller
return response()->json(["applicants" => $applications], 200);
Vue file
data: () => ({
applicants:{}
})
//Method
getJobApplicants(){
this.applicants = response.data.applicants.data;
}
//<div body></div>
<pagination
:data="Object.fromEntries(applicants)"
@pagination-change-page="getJobApplicants"
>
<span slot="prev-nav">Previous </span>
<span slot="next-nav">Next</span>
</pagination>
This issue is stale because it has been open for 90 days with no activity.
This issue was closed because it has been inactive for 30 days since being marked as stale.
When passing a Laravel paginator response to the data prop of this component I receive the following error:
The problem is, the data passed to the data prop is, in fact, an object and is indicated as so in Vue DevTools.
As you can see from the screenshot above, it is indeed an object, as expected by the component and indicated in the docs.
I'm using Vue 2.
Unless the type check is on the data property of the paginator response, then something is going wrong here.
That said, in the docs, it gives an example of the type of response required, and the data property of the paginator response is an array: