Laravelの{{ 変数 }}と、Vue.jsの{{ 変数 }}の共存方法

未分類

こんにちは、ななです。

フロントエンドエンジニアとして活動しています。

最近、LaravelとVue.jsの勉強をし始めて、
個人的に疑問に思うことがあったので、この記事にまとめました。

本記事は、LaravelまたはVue.jsを学習中またはこれから学習する方向けの内容です。

LaravelのBladeとVue.jsのDOMの共存方法

私が疑問に思ったこと

Laravelは、HTML「厳密には、bladeのphpファイル」に、
phpの関数で受け取った変数を出力する際は、
{{ 変数 }}
を使って表示します。

例えば、以下のように

<div>{{ $number }}</div>

また、Vue.jsも、HTMLに変数を出力する際は
{{ 変数 }}
のようにして出力します。

例えば、以下のように

<div>{{ number }}</div>

この2つの表示方法が、同じHTML上に共存してしまうと、エラーが起きてしまいます。

// LaravelとVue.jsを判別してくれないので、エラーが起きてしまう。
<div>{{ $number }}</div>  // Laravel
<div>{{ number }}</div>  // Vue.js

では、どうすればLaravelの{{ 変数 }}と、Vue.jsの{{ 変数 }}を共存させることができるのでしょう?

解決方法

解決方法は、簡単です。

Vue.jsの変数をHTML上に表示する際、以下のように「@」をつければOKです。

<div>@{{ number }}</div>

こうすることで、処理側はLaravelとVueを問題なく判別してくれます。

<div>{{ $number }}</div> // Laravel
<div>@{{ number }}</div>  // Vue.js

おわりに

これで、問題なくLaravelとVue.jsが共存できるようになりましたね。

コメント

タイトルとURLをコピーしました