質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.61%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 14K+

aboy

score 7

前提・実現したいこと

Laravel5.2 + Vue.js

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

該当のソースコード

全て例になります

// Controller
~~~
public function index() : View
{
    // $items取得
    return View('index', [
        'items' => $items
    ]);
}
// index.blade.php
~~~
<ul>
  <li v-for="item in list">
    @{{item}}
  </li>
</ul>
// js(Vue.js)
Vue.component('hoge', {
  data() {
    return {
      list: []
    }
  }
}

試したこと

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+4

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 15:41

    > それをいったん許容してしまうとVue.jsの外側にVueの値が散ってしまうので将来的に破綻する可能性が高いと思われます。

    そうですね..!
    現状API経由でできているので、このままの設計で進みたいと思います。
    Vue.jsの恩恵を最大限受けられるように気をつけます。

    キャンセル

checkベストアンサー

+1

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div id="entry" name="{{ $name  }}">
                </div>
            </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
        <script type="text/javascript">
            Vue.config.delimiters = ['(%', '%)'];
            var app = new Vue({
                // エントリポイント。セレクタで書いてよい
                el: 'div#entry',
                template: '<h1>Hello, (% name %)</h1>',
                // バインドするデータオブジェクト
                props: ['name'],
                created: function () {
                    console.log(this)
                }
            });
        </script>
    </body>
</html>

上記で

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る