How can i pass an array in vue js via laravel(blade)? I tried to do so :
//$users - array blade:
<all-users users="{{ $users }}"></all-users>
vue:
<tr v-for="user in users" >
<td>{{ user.id }}</td>
<td>{{ user.login }}</td>
</tr>
js:
export default {
props:['users']
}
//don't working all
PS I tried also:
<all-users users="{{ $users[0]->toJson() }}"></all-users>
Output:
{"id":2,"email":"usersss@mail.ru","login":"SimpleUser","role_id":0,"images":"public\/img\/default_avatar.png","created_at":null,"updated_at":null}
In advance thanks for help
<all-users :users='@json($users)'></all-users>
或
<all-users :users='{{ json_encode($users) }}'></all-users>
To pass data from laravel to vue your best option is using the @json option provided by Laravel. So your code will be like so:
<all-users :users='@json($users)'></all-users>
Keep in mind that you need to use single quotations @json function. Also don't forget to use ":" for your user prop otherwise it will be interpreted as string.
Laravel docs for json data: https://laravel.com/docs/master/blade#displaying-data
<all-users :users='@json($usersInfo)'></all-users>
Also, keep in mind that you can't use a camel case here. It should be:
<all-users :users='@json($usersinfo)'></all-users>
in Blade:
<div id="app">
<all-users users="{{ $users }}"></all-users>
</div>
get in Vue:
export default({
props:['users'],
mounted: {
console.log(this.users); // return your users
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.