viewに含まれる変数をVue.jsの中で使いたい

###前提・実現したいこと
Laravel5.2 + Vue.js

LaravelのControllerから値を添えたViewをReturnし、その値をVue.jsで取得する。

###該当のソースコード
全て例になります

php
1// Controller
2~~~
3public function index() : View
4{
5    // $items取得
6    return View('index', [
7        'items' => $items
8    ]);
9}

html
1// index.blade.php
2~~~
3<ul>
4  <li v-for="item in list">
5    @{{item}}
6  </li>
7</ul>

javascript
1// js(Vue.js)
2Vue.component('hoge', {
3  data() {
4    return {
5      list: []
6    }
7  }
8}

###試したこと
Controllerのindex()でデータを返すのではなく、ajaxで取得できるAPIをLaravel側で用意し、Vue.jsのcreated時にajax経由でAPIを叩いてデータを取得し、Vue.js内のlistに追加するという方法はできています。

JavaScript
1// js(Vue.js)
2Vue.component('hoge', {
3  data() {
4    return {
5      list: []
6    }
7  },
8  created() {
9    this.fetchItems();
10  },
11  methods: {
12    fetchItems() {
13      this.$http.get('Laravel側で用意したAPI', items => {
14        this.list = items;
15      });
16    }
17  }
18}

ですが、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

なにか不足などありましたらお申し付けください。

回答2件

View経由でVue.jsに値を渡すとなると、結果的には「HTMLに埋め込まれた値」をVue.jsで読み込むことになると思われます。
なので例えば<div disable="none">{{ '渡したい値' }}</div>を埋め込んで、class経由で取得しvue.jsに食わせれば実現できると思います。

が、それをいったん許容してしまうとVue.jsの外側にVueの値が散ってしまうので将来的に破綻する可能性が高いと思われます。
なのでVue.jsを利用するのであれば基本はAPI経由で値を渡すのが長い目で見るとよいのかなと個人的には思います。

それでも前者のような方法を採用する場合はある程度の制約やルールを決める＆別開発者のためにドキュメントを残すことが必須だと思います。

Vue.jsを初めとしたViewライブラリのいいところはHTMLの状態に左右されずDOMの状態をJSの管理下におけるところだと思うのでそこを意識して検討してみてください！

投稿2016/06/22 06:06

編集2016/06/22 06:08

SotaSugiura

総合スコア16

回答へのコメント

aboy

2016/06/22 06:41

> それをいったん許容してしまうとVue.jsの外側にVueの値が散ってしまうので将来的に破綻する可能性が高いと思われます。そうですね..！現状API経由でできているので、このままの設計で進みたいと思います。 Vue.jsの恩恵を最大限受けられるように気をつけます。

ベストアンサー

使う使わないは別として、やり方として知っておいた方がいいように思いましたので回答します。

端的に言うと、コンポーネントのプロパティとして渡すことで実現可能です。配列や混みいったオブジェクトまで渡すことができるかはちょっと試していません。
以下にサンプルを貼付します。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>Laravel</title>
5        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
6    </head>
7    <body>
8        <div class="container">
9            <div class="content">
10                <div id="entry" name="{{ $name  }}">
11                </div>
12            </div>
13        </div>
14        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
15        <script type="text/javascript">
16            Vue.config.delimiters = ['(%', '%)'];
17            var app = new Vue({
18                // エントリポイント。セレクタで書いてよい
19                el: 'div#entry',
20                template: '<h1>Hello, (% name %)</h1>',
21                // バインドするデータオブジェクト
22                props: ['name'],
23                created: function () {
24                    console.log(this)
25                }
26            });
27        </script>
28    </body>
29</html>
30

上記で

<div id="entry" name="{{ $name  }}"></div>

と、している個所がありますが、このname="{{ $name }}"としている部分がプロパティとして渡している個所です。通常は:name="name"のように、親コンポーネントから子コンポーネントへのJavascriptでの変数を渡すために使用しますが、コロンを付けないことで実値がわたります。

投稿2016/06/22 06:58