質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

973閲覧

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

holic

総合スコア134

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2018/01/13 17:08

編集2018/01/14 01:29

###前提・実現したいこと
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系

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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]です。 テストソースをつくっていただいてありがとうございます。 もう一度ソースを要確認してみます。
guest

0

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>

自分の別コードで試したところ、<div v-for="hoge" v-cloak>{{fuga}}</div>
このような時は{{ マスタッシュ記号 }}が表示されました(原因はわかりませんが。。。)

上記のようにv-for と v-cloakを分けてやれば表示されなかったです。

また余談ですが、今後単一ファイルコンポーネント化していくのであれば、ビルド後のものに{{}}が表示されることはありません。
僕もまだまだvue.js初心者ですが、お互い頑張りましょう!

投稿2018/01/16 06:38

esocchi

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

holic

2018/01/16 09:11 編集

原因がつかめずに悩んでいました。 esocchi様ご意見ありがとうございます。 後ほど、試してみます。 非常に心強いです。 単一ファイルコンポーネント化も大変興味があります、今後理解を深めたらそちらも勉強してみたいと思います。
guest

0

「lig様が同じようなところで記事を~」の部分ですがcssで可視不可視の切り替えを自力でする感じですね。
orange-lion氏のおっしゃる通りv-cloakが用意されているのでそちらを使えばよろしいかと。

あと最後のかっこが多いですよね?

html

1})//←ここ 2</script>

投稿2018/01/13 23:14

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

holic

2018/01/14 01:49

sousuke様 ソースのご指摘ありがとうございます。 変更させていただきました。 また補足の説明もありがとうございます。 v-cloak使用の方向で只今テストしております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問