###前提・実現したいこと
Laravel5.2 + Vue.js
LaravelのControllerから値を添えたViewをReturnし、その値をVue.jsで取得する。
###該当のソースコード
全て例になります
php
// Controller ~~~ public function index() : View { // $items取得 return View('index', [ 'items' => $items ]); }
html
// index.blade.php ~~~ <ul> <li v-for="item in list"> @{{item}} </li> </ul>
javascript
// js(Vue.js) Vue.component('hoge', { data() { return { list: [] } } }
###試したこと
Controllerのindex()
でデータを返すのではなく、ajaxで取得できるAPIをLaravel側で用意し、Vue.jsのcreated
時にajax経由でAPIを叩いてデータを取得し、Vue.js内のlist
に追加するという方法はできています。
JavaScript
// js(Vue.js) Vue.component('hoge', { data() { return { list: [] } }, created() { this.fetchItems(); }, methods: { fetchItems() { this.$http.get('Laravel側で用意したAPI', items => { this.list = items; }); } } }
ですが、Controller経由でViewに渡されたデータをVue.jsで取得する方法があれば、教えていただきたいです。
また、Viewの中でforeach($items as $item)
のようにしないのは、Vue.jsでデータの追加・削除をするためにVue.jsの変数list
で持ちたいためです。
なにかアクションにフックして動くメソッドであれば<button @click="get({{$items}})">
のようにして変数は渡せるのですが、今回はcreated
時にはデータが欲しいためアクションに紐づくメソッドではなく、引数が受け取れません(もし引数を渡せる方法があるのでしたらおそらくそれが回答です!!!)
よろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
PHP 7.0
Laravel 5.2
Vue.js 1.0.25
なにか不足などありましたらお申し付けください。
まだ回答がついていません
会員登録して回答してみよう