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

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

新規登録して質問してみよう
ただいま回答率
85.44%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

2回答

21013閲覧

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

aboy

総合スコア7

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

4クリップ

投稿2016/06/22 05:54

編集2016/06/22 05:55

###前提・実現したいこと
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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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の恩恵を最大限受けられるように気をつけます。
guest

0

ベストアンサー

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

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

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

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問