先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。
computed
主に、vuex系のデータの同期(とでも言えばいいのか)やバリデーションやデータ出力、整形、計算などで使います。
ライフライクルに注意で、createdより後、mountedよりは前です。
Vueライフサイクルの盲点、computedの一発目の発火はmountedより早い
v-class
出勤日を出力するシステムで、土日の色を変えたいなどの時に使用。
関数を直接埋め込んで、CSSを変えたりできそうです。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span :class="{sunday:isSunday(targetDate), saturday:isSaturday(targetDate)}"> targetDate </span> <style type="text/css"> .saturday{ color:#0404B4; } .sunday{ color:#FF0040; } </style> |
js
1 2 3 4 5 6 7 |
isSaturday(targetDate){ return Date.create(targetDate).isSaturday(); }, isSunday(targetDate){ return Date.create(targetDate).isSunday(); }, |
上記の場合、それぞれ条件分岐でtrueになった時にclassが有効になります。
https://jp.vuejs.org/v2/guide/class-and-style.html
ajaxのasync:false
以前もasync:falseに関する記事を書きました。
ajaxのasync:falseと複数DBのjoinに関して
今回もパターンは同じですが、
ローディング画面開始
ajax処理
ローディング画面終了
というような処理を書きましたがajaxで async:false を設定しており、ローディングが正常に機能しませんでした。どうやらブラウザがロックされるため、vueのレンダリングにも影響を与えているようです。
async:false を使いたい場面などはそんなにないと思いますので、 aysnc:true にして回避。
他参考リンク