人気のPHPoWEBアプリケーションフレームワークLaravelのTipsを記録していきます

Laravelのbladeテンプレート内で vue.js を使用する

Laravelのbladeテンプレート、vue.jsのテンプレート、どちらも {{ }} で変数を囲う記法なので、混在するとLaravelでエラーとなります。 そこで対応方法が2つあるようです。

● {{ の 前に @ をつける

    <div>
        {{ message }}
    </div>

 ↓

    <div>
        @{{ message }}
    </div>

● vue.js側のデリミタ {{ }} を (% %) に変更する

こちらの方法がオススメです。

Vue.config.delimiters = ['(%', '%)']; でデリミタを変更して使用します。

var vm = new Vue({
    el: '#myApp',
    data: {
    }
});

  ↓

var vm = new Vue({
    delimiters: ["(%","%)"] ,
    el: '#myApp',
    data: {
    }
});

引用: https://goo.gl/Y7QqBz

No.1321
10/29 09:45

edit