vue.js loading中にテンプレートが表示されてしまう。

###前提・実現したいこと
loading中にテンプレートが表示されてしまう。
{{ val.name }}
の部分が一瞬見えてしまう。
完全にローディングし終わるまでは表示させないなどは出来ないのでしょうか。
ソースを下記に記します。

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6<link rel="stylesheet" href="/css/style.css">
7<script src="https://unpkg.com/vue/dist/vue.js"></script>
8</head>
9<body>
10  
11
12
13 <section>
14  <div class="app">
15    <h1 v-for="val in consulting.concat(contents,cop)" v-if="currentSlugFlg(val)">{{val.name}}</h1>
16    <ul>
17      <li v-for="val in consulting" v-bind:class="{ active:isCurrent(val) }"><a v-bind:href="val.slug">{{ val.name }}</a></li>
18    </ul>
19    <hr>
20    <ul>
21      <li v-for="val in contents" v-bind:class="{ active: isCurrent(val) }"><a v-bind:href="val.slug">{{ val.name }}</a></li>
22    </ul>
23    <hr>
24    <ul>
25      <li v-for="val in cop" v-bind:class="{ active: isCurrent(val) }"><a v-bind:href="val.slug">{{ val.name }}</a></li>
26    </ul>
27  </div>
28  </section>
29
30<script>
31   new Vue({
32      el: '.app',
33      methods:{
34         currentSlugFlg:function(currentData){
35           //return currentData.slug === "/consulting/aaaa/"
36           return currentData.slug === location.pathname;
37        },
38        isCurrent:function(currentData){
39           //return currentData.slug === "/consulting/aaaa/"
40           return currentData.slug === location.pathname;
41          //return false;
42}
43      },
44      data: {
45        consulting:[
46        {
47        'slug':'/consulting/aaaa/',
48        'name':'狭い土地利用'
49        },
50        {
51        'slug':'/consulting/bbbb/',
52        'name':'丁度よいい土地利用'
53        },
54        {
55        'slug':'/consulting/ccccc/',
56        'name':'広いい土地利用'
57        }      
58       ],
59      contents:[
60        {
61        'slug':'/contents/',
62        'name':'コンテンツについて'
63        },
64        {
65        'slug':'/contents/mmmmm/',
66        'name':'点々'
67        },
68        {
69        'slug':'/contents/llll/',
70        'name':'増やしていきましょう'
71        }      
72     ],     
73      cop:[
74        {
75        'slug':'/cop/design/',
76        'name':'デザイン'
77        },
78        {
79        'slug':'/cop/good/',
80        'name':'商品'
81        },
82        {
83        'slug':'/cop/',
84        'name':'コップ'
85        }      
86     ]     
87    }
88  })
89</script>
90</body>
91</html>

###試したこと
lig様が同じようなところで記事を書いておりましたが、

この実装方法がわからずでした。
vue.jsに詳しいお方がいらっしゃいましたら、是非ご教示くださいませ。

###補足情報(言語/FW/ツール等のバージョンなど)
vu.js 2系

行動規範の内容に同意します

回答3件

ベストアンサー

v-cloakを使ってテンプレート変数を隠すことができます

https://jsfiddle.net/ews02ofq/

公式ドキュメント

https://jp.vuejs.org/v2/api/index.html#v-cloak

投稿2018/01/13 20:42

編集2018/01/13 20:44

orange-lion

総合スコア426

holic

2018/01/14 02:25 編集

orange-lion様　ご回答ありがとうございます、質問をさせてください。頂いた回答をもとに以下の記述をしてみました。 ●html部分 <h1 v-cloak v-for="val in consulting.concat(contents,cop)" v-if="currentSlugFlg(val)">{{val.name}}</h1> ●css部分 [v-cloak] { display:none; } しかし、上手く行きませんでした。ネット上ではorange-lion様の例で解決している方が多いみたいなのに（汗）教えていただいたデモサイトのjs（vueセッティング）箇所ですが、 setTimeoutを使用しております、この記述は絶対に必要になってくるのでしょうか。

orange-lion

2018/01/14 02:14 編集

setTimeout自体は必要ないです（効果が出るかどうかをテストするためのものであって実際には必要ないです）あといただいた回答を見るにCSS部分の箇所が[cloak]になっていますがこれは脱字でしょうか？正確には[v-cloak]です https://jsfiddle.net/ews02ofq/1/ 一応 ho_ri 様のコード自体で動くようにしてみましたいくつかリファクタしてしまった部分もあるので意図通りの回答になっているかどうかはわかりませんがご確認いただけると

holic

2018/01/14 02:39 編集

「正確には[v-cloak]です～」すいません、脱字です。（更新しました）テストしている環境では[v-cloak]です。テストソースをつくっていただいてありがとうございます。もう一度ソースを要確認してみます。

行動規範の内容に同意します

css
1[v-cloak]{
2 display: none:
3}

html
1<div class="app">
2 <div v-for="val in consulting.concat(contents,cop)">
3    <h1 v-if="currentSlugFlg(val)" v-cloak>{{val.name}}</h1>
4 </div>
5  .....
6</div>