練習用の学習プロジェクトを仕様変更しようと思い立ち、せっかくだから勉強中のVue.jsを導入してみようとやってみた。
・・初っ端からいきなりレンダリングがバグった。
<input type = "number" id = "text_num{{$item->id}}" name="text_num{{$item->id}}"
style="display:inline-block;width:30px;height:20px" min="1" max="9" value=1>
ちょっとこのブログだとワードラップするのでわかりにくいけど、
上のコードは真ん中で改行が入ってます。
結構長めのタグで画面を開発画面を大きくはみ出て読めないので改行いれてました。
今まで問題ありませんでしたが、なぜかbladeにvueを混ぜるとタグの間に改行入れると写真のように改行したところから下のコードがむき出しでレンダリングされました。
とりあえず改行して一行にしたら治りました。
何かエスケープコードかアノテーションみたいなのでキチンと直す方法があるのかもしれませんが今のところわかりません。
コメントのご指摘より追記
改行のせいじゃなくて、全角スペースが入っている事が根本的な原因だったようです。
失礼しました。