背景
Vue.jsのチラつきとは
Vue.jsの「マスタッシュ表記（{{ data }}のような表記）」や「v-if」などで表示を制御している場合、ページ読み込み直後に一瞬だけVueデータが反映される前のコードが表示されてしまうことがある。これを経験した人は少なくないと思う。
v-cloakでの対策と問題点
このチラつきの解決策をネットで検索すると、「v-cloakを使いましょう」という記事が出てきて、下記のようなサンプルコードを提案される。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>{{ message }}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: "メッセージ",
},
});
</script>
</body>
</html>
ただの html や php 環境ならこの方法で解決できる。しかし、Laravel の blade で Vue.js を使用している場合、この方法では解決しないことがある。
（条件や原因を特定できていないので、もし知っている人はコメントいただけるとありがたいです。）
v-cloakを使わない解決方法
サンプルコード
v-cloakと同様の処理を下記サンプルコードのように自作してしまえば解決できる。
index.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<div id="app" style="display:none"><!-- (1)html読み込み時はcssで非表示 -->
<p>@{{ message }}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: "メッセージ",
},
mounted: function () {
const targetElement = this.$el;
this.$el.style.display='block'; // (2)vueマウント完了後に表示させる
},
});
</script>
</body>
</html>
解説
- まず、Vueの制御対象のコンテンツ全体を「style="display:none"」で非表示にしておく。こうすることで、Vueと連動する部分はページ読み込み直後であっても表示されない。
- Vueインスタンスが生成され、エレメントのマウントが完了後（＝Vueインスタンスのデータがhtmlコード側に反映された後）に、非表示を解除する。
同様の問題で困っている人の参考になれば幸いです。