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

Question

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

you say that your ouput return object but why do you loop your object in your vue? — Jay
– Jay, Commented Apr 10, 2018 at 8:32

Praveen Tamil · Accepted Answer · 2020-04-09 11:57:14Z

16

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

or

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

edited Apr 9, 2020 at 11:57

answered Apr 10, 2018 at 5:54

Praveen Tamil

1,16611 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrey Over a year ago

I receive all data in json format. How can i sort it in vue js? Via "v-for" - don't work

Praveen Tamil Over a year ago

You can sort the json by @json($users->sortBy('name'))

hendra1 Over a year ago

the answer needs to updated with @hasan-wahajat, if using json use single quote, and add semicolon :

Daniyal Nasir Over a year ago

So, I have a case where one value in my json contains ' (single quote) like daniel's and it still crashes the app. (I have tried escaping it at php level with every possible way but of no use)

Hasan Wajahat · Accepted Answer · 2020-01-22 09:46:31Z

8

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

answered Jan 22, 2020 at 9:46

Hasan Wajahat

1,8272 gold badges17 silver badges16 bronze badges

Comments

Mark Andog · Accepted Answer · 2021-03-16 07:32:09Z

1

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

answered Mar 16, 2021 at 7:32

Mark Andog

1091 silver badge10 bronze badges

Comments

Marcos Jesus · Accepted Answer · 2021-08-18 13:59:09Z

0

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
  }

});

answered Aug 18, 2021 at 13:59

Marcos Jesus

193 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related