Laravel+Vue.jsでblade上にv-modelの変数を{{ }}を使って表示させたいとき
Laravelではblade上で変数を表示させるときに{{ }}を使って変数を出力させることになります。
一方、Vue.jsでも変数を表示させるときに{{ }}を使います。
LaravelとVue.jsでシステムを作成した場合、{{ }}が重複してしまうのです。
LaravelとVue.jsの場合、Laravel側の{{ }}の出力定義が優先されます。
今回はLaravelを利用したときに、Vue.jsの変数をどうやって出力したら良いかについてご紹介いたします。
Laravel+Vue.jsでblade上にv-modelの変数を{{ }}を使って表示させたいとき
結論から言います。
Laravel側の変数をblade上に出力したい時は、例として変数’testLaravelVariable’を出力したい場合、そのまま
|
1 |
{{ testLaravelVariable }} |
と書きます。
一方、Vue.js側の変数をblade上に出力したい場合、例として変数’testVueVariable’を出力させるとすると、
|
1 |
@{{ testVueVariable }} |
と書きます。
変数を{{ }}で括って先頭に@をつけるだけですね。
知らなければ分からないことですが、結構シンプルです。
終わりに
今回はLaravel+Vue.jsでblade上にv-modelの変数を{{ }}を使って表示させたいときどのようにすれば良いのかについてご紹介いたしました。