通过blade（laravel）将道具（数组）传递给vue.js

Question

如何通过 laravel(blade) 在 vue js 中传递数组？ 我试图这样做：

//$users - 数组刀片：

<all-users users="{{ $users }}"></all-users>

视图：

<tr v-for="user in users" >

                    <td>{{ user.id }}</td>
                    <td>{{ user.login }}</td> 
</tr>

js：

export default {

    props:['users']
    }

//不工作

PS我也试过：
<all-users users="{{ $users[0]->toJson() }}"></all-users>
输出：

{"id":2,"email":"usersss@mail.ru","login":"SimpleUser","role_id":0,"images":"public\/img\/default_avatar.png","created_at":null,"updated_at":null}

在此先感谢您的帮助

Answer 1

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

或

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

Answer 2

要将数据从 laravel 传递到 vue，您最好的选择是使用 Laravel 提供的 @json 选项。 所以你的代码会是这样的：

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

请记住，您需要使用单引号 @json 函数。 另外不要忘记为您的用户道具使用“：”，否则它将被解释为字符串。

json 数据的 Laravel 文档： https ://laravel.com/docs/master/blade#displaying-data

Answer 3

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

另外，请记住，您不能在此处使用驼峰式保护套。 应该是：

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

Answer 4

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
  }

});