vueに関する小ネタ(computed、v-classなど)

投稿日：2019年12月8日

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。

Contents

1 computed
2 v-class
3 ajaxのasync:false

computed

主に、vuex系のデータの同期(とでも言えばいいのか)やバリデーションやデータ出力、整形、計算などで使います。

ライフライクルに注意で、createdより後、mountedよりは前です。

Vueライフサイクルの盲点、computedの一発目の発火はmountedより早い

Vue.jsの便利な機能coumptedとは？

v-class

出勤日を出力するシステムで、土日の色を変えたいなどの時に使用。

関数を直接埋め込んで、CSSを変えたりできそうです。
html

<span  :class="{sunday:isSunday(targetDate),
		       saturday:isSaturday(targetDate)}">
    targetDate
</span>

<style type="text/css">
.saturday{
	color:#0404B4;
}

.sunday{
	color:#FF0040;
}
</style>

<span :class="{sunday:isSunday(targetDate),

saturday:isSaturday(targetDate)}">

targetDate

</span>

.saturday{

color:#0404B4;

}

.sunday{

color:#FF0040;

}

</style>

isSaturday(targetDate){
    return Date.create(targetDate).isSaturday();
},

isSunday(targetDate){
    return Date.create(targetDate).isSunday();
},

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 にして回避。

他参考リンク

async:false とは何か。或いは、非同期処理を諦めるのはまだ早い!