Laravelを使ってて、vuejsを使ってみたのでメモ。

セットアップ

laradockを使っている環境で開発をしているので、workspace内に入ってvuejsのセットアップをします。 npmインストールをするとvuejsを使得るようになる。

docker-compose exec workspaece /bin/bash

#仮にLaravelのソースの場所をmyprojectとする
cd myproject

npm install

compormentの作成

app/resources/js/components のディレクトリ以下にvue用のSearchOptionsComponent.vueのファイルを作成し、 app/resources/js/app.jsに読み込み設定をする

//app.js
require('./bootstrap');
window.Vue = require('vue');

Vue.component('searchoptions-component', require('./components/SearchOptionsComponent.vue').default);

const app = new Vue({
    el: '#app',
});

viewファイルへ紐付ける

view用のbladeのhtmlへcomponent名のタグを追加する。このとき、componentタグの上位タグのidに elで指定していたid名をつけることを忘れない。

<div class="container" id="app">
  <searchoptions-component ></searchoptions-component>
</div>

これでだいたい動くようになる。

v-bindによるviewとvue間のデータのやり取り

bladeのファイルにv-bindの形式で書くことによって、データをvueに引き渡せます。

<div class="container" id="app">
  <searchoptions-component v-bind:inputdata="{{ $input_json }}"></searchoptions-component>
</div>

この状態で引き渡されたデータは$attrs経由で参照できるようになります。

        mounted() {
            console.log(this.$attrs.inputdata);
        }

注意点としてはphpのarrayを渡す場合はjson_encodeしてjson形式で渡すこと。文字列の場合はそのままで良い。

componentのタブを動的にはできなかった。

これは単に調査不足なのかもなんだけど、

<div class="container" id="app">
    <searchoptions-component-{{$type}} ></searchoptions-component-{{$type}}>
</div>

こういう書き方をしてみたんだけどうまく行かなかった。 多分app.js内でcomponentの使いまわしとかはしたほうがいいみたい。

vueのchrome拡張

Vue.js devtools

割とconsole.logデバッグになりがちなんだけど、これを入れておくと、オブジェクト内の変数とかを全部表示してくれたりするので便利だった。

ざっと触って見た感じ、bladeとvue.jsのどっちかを使うって決めて、片方に全振りしたほうが良さそう。resource内のbladeファイルとvue用のjsファイルだけならいいんだけど、その紐付けも記述していかないと行けないので、結構煩雑な作業が多い印象。まぁ、でもhtmlのサイトをちょっとずつvueに移行していくってのもできるってことでもあるので、それはそれでいいな。 next.jsつかいたいなー。