Laravel blade + vue.js でユーザー入力に対応する

きっかけ

Laravel blade + vue.js という環境でユーザーの入力を扱う際にいろいろ苦戦したので、備忘録として記載します。

blade 記法で値を置くと

コントローラから渡したデータを blade 記法で書く際はすぐに以下の記載を行うと思います。

{{ $var }}

一般的なデータについてはこの入力で渡せるので良いと思いますが、もしこのデータ自体がユーザー入力等で{{ 何らかの入力 }}を含んでいる場合、

1. blade テンプレートのレンダリング
2. vue.js のコンパイル
3. 画面の表示

という順序の内、1 番目の blade のレンダリング後にユーザーが入力した{{ 何らかの入力 }}がページソース上に載った状態で 2 番目のレンダリングに回されます。

この際、2 番目のコンパイルで vue.js 側は真面目に{{ 何らかの入力 }}の中身を解釈しようとするので、大抵の場合はコンパイル時のエラーが出ることになります。

回避方法１

データを置く部分の親要素にv-preを付ける。

例
<div v-pre>
    {{ $var }}
</div>

用途：ユーザーの入力をただ表示するだけの場合
（内容を確認する画面等）

v-preはついている要素とその子要素のコンパイルをスキップするものであり、結果的に子要素であるユーザー入力内の{{ 何らかの入力 }}のコンパイルもスキップされ、表示できるようになります。

回避方法２

script 内でデータを渡し、vue.js の data から参照する。

<textarea v-model="message"></textarea>

(中略)

var app = new Vue({
  el: '#app',
  data: {
    message: {{ $var }}
  }
})

用途：ユーザーの入力を vue.js 側でも利用する場合。
（input や textarea などの入力が絡む場合）

実際の入力部分にv-preを付けると、入力された内容に対しての vue.js の一切の処理が行えない状況になります。
入力内容に対して何らかの vue.js の処理を行う場合、blade 記法で入力部分にデータを渡すのは諦めて、vue.js の data に blade 記法で渡す必要があります。

この際、実際には、改行を含む際の対応や vue.js の data から参照する際の記法など、javascript, vue.js, html 間のお約束に沿った書き方に気を付ける必要があります。