Andrey
Andrey

Reputation: 93

Passing props (array) to vue.js via blade (laravel)

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

P.S I tried also:
<all-users users="{{ $users[0]->toJson() }}"></all-users>
Output:

{"id":2,"email":"[email protected]","login":"SimpleUser","role_id":0,"images":"public\/img\/default_avatar.png","created_at":null,"updated_at":null}

In advance thanks for help

Upvotes: 8

Views: 15771

Answers (4)

Marcos Jesus
Marcos Jesus

Reputation: 19

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
  }

});

Upvotes: 0

Mark Andog
Mark Andog

Reputation: 109

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

Upvotes: 1

Praveen Tamil
Praveen Tamil

Reputation: 1156

<all-users :users='@json($users)'></all-users>

or

 <all-users :users='{{ json_encode($users) }}'></all-users>

Upvotes: 16

Hasan Wajahat
Hasan Wajahat

Reputation: 1817

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

Upvotes: 8

Related Questions