Laravel Blade内にvue.jsのテンプレートを直接書いた時に問題なるケースをまとめています。

1. Laravel Blade
×
vue.js
混在させる場合の注意点

2. Seiichiro Kurihara
株式会社クリエイターズマッチ
サーバーサイドエンジニア

3. Bladeとvue.jsを混在させる場合以下の3点を
気にする必要があります。
• Bladeの記述とvue.jsの記述の衝突
• ブラウザのDOM解析
• ブラウザのjavascriptの挙動

4. Bladeの記述とvue.jsの記述が衝突するケース

5. Bladeの記述とvue.jsの記述が衝突するケース
「v-onの省略」

6. clickイベントでshowというイベントをemit
したい
Vue.component('custom-component', {
template:`<div v-on:click="@emit('show’)">Button</div>`
});
custom-component.js
<custom-component @show="show"></custom-component>
sample.blade.php
v-onを省略して@にしています。

7. Bladeで@showと衝突してエラー

8. v-onは省略せず書きましょう!!
メモ
Bladeが今後どんなタグを実装してくるかわからないので、
現在定義されていない@であってもv-onは省略すべきではありません。
<custom-component v-on:show="show"></custom-component>
sample.blade.php

9. ブラウザのDOM解析が問題になるケース

10. ブラウザのDOM解析が問題になるケース
「スタイル属性のバインディング」

11. スタイル属性のwidthに値をバインド
var app = newVue({
el:'#app‘,
data:{
width: ‘300px’
}
})；
sample.js
<div style=“width:@{{ width }}”></div>
sample.blade.php
widthの値を直接バインドしている

12. インラインスタイルに無効なスタイルが存在す
る場合、ブラウザはそのスタイルを無視する挙
動をするので、@{{width}}の部分が無効なスタイル
と判断されて、無視されてしまう。

13. 素直にv-bindを使いましょう
<div v-bind:style=“{ width: width }”></div>
sample.blade.php

14. ブラウザのDOM解析が問題になるケース
「自己終了形式のコンポーネント」

15. slot等を使用しないコンポーネントの場合、自己
終了形式のタグが推奨されているので自己終了
形式する
<custom-component/>
sample.blade.php

16. HTML5の仕様上、カスタムタグの自己終了
形式を許可していないので、コンポーネ
ントが消えてしまったりする。

17. 諦めて、閉じタグを書きましょう。
<custom-component></custom-component>
sample.blade.php

18. ブラウザのjavascriptの挙動が問題なるケース

19. ブラウザのjavascriptの挙動が問題なるケース
「BladeでのES2015(ES6)の記述」

20. vue.jsのドキュメントに記述のmodelの実装をそ
のまま書いてみる
<input
v-bind:value=“something”
v-on:input=“(value)=>{ something = value }”
>
sample.blade.php
アロー関数使っています

21. 残念ながら、IE11をはじめES2015(ES6)非対応のブ
ラウザでエラーになります。
babel等でES2015 (ES6)に対応したとしても、blade
はコンパイルされない。

22. あきらめてES5で書くかメソッドにしましょ
う
<input
v-bind:value=“something”
v-on:input=“function(value) {something=value}”
>
sample.blade.php
<input
v-bind:value=“something”
v-on:input=“onInput”
>
sample.blade.php

23. ブラウザのjavascriptの挙動が問題なるケース
「Filter」

24. 普通にfilterを書いてみる。
追加引数ありバージョン
追加引数なしバージョン
<div>
@{{ value | filter() }}
</div>
sample.blade.php
<div>
@{{ value | filter2('argvalue') }}
</div>
sample.blade.php

25. 追加の引数なしfilterがIEでエラー

26. 追加引数がない場合は()を省略しましょう
<div>
@{{ value | filter }}
</div>
sample.blade.php

27. ブラウザのjavascriptの挙動が問題なるケース
「v-modelに未定義プロパティを入れる」

28. v-modelに未定義なプロパティを入れる!!
<input v-model="obj.value">
sample.blade.php
var app = newVue({
el:'#app‘,
data:{
obj:{}
}
})；
sample.js

29. 当然エラー
といいたいところですが
IE以外はエラーを吐いてくれません

30. そもそも未定義プロパティは作らないよう
にしましょう。
var app = newVue({
el:'#app‘,
data:{
obj:{
value: true
}
}
})；
sample.js
<input v-model="obj.value">
sample.blade.php

31. まとめ
• v-onは省略しない
• style属性のバインディングは必ずv-bindを使う
• コンポーネントを自己終了形式で書かない
• ES2015(ES6)を書かない
• Filterに追加引数がない場合は()を書かない
• 未定義のプロパティを参照しないよう気をつける