v-クロークを無視してVuetify

Vuetifyを使用しているときにコンテンツの最初のフラッシュ問題を防ぐことはできません。私はこれまで、通常のv-cloakソリューションでこれを達成しましたが、何もUIライブラリなしでVueを使用していますが、Vuetifyで動作しない何らかの理由でJSが読み込みを完了する前にまだ非構造化コンテンツのフラッシュを取得しています。v-クロークを無視してVuetify

私はこのことで（さえインラインdisplay: noneを試してみました）で初期index.htmlを持っている：

初期 app.vueファイル内

<head> 
    <style> 
     [v-cloak] { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
<div id="app" v-cloak style="display: none;"></div> 
    ... 
</body>

そして：

<template> 
    <div id="app" v-cloak> 
     <v-app v-cloak> 
     ... 
<style> 
    [v-cloak] { 
     display: none; 
    }

何らかの理由でインラインdisplay: none両方とv-cloakの複数がオーバーライドされています。私はVuetifyによって推測しています。このバグを回避するために、ユーザーは読み込み中に最初のフラッシュを取得しないようにする必要がありますか？

出典

2017-12-28 user9993

アプリケーションが実際にDOMを制御され、レンダリングた後のVue/Vuetifyだけそれを上書きする可能性があるため、インライン事は非常に奇妙である - ができた、その時点でこのアプリは既にレンダリングされているので、もうFOUGしないでください。 –

単にv-cloakの代わりにv-cloak = "true"を適用しようとしてください。 –

これをtrueに設定しても、それを修正することはできません。私はちょうどユーザーがフラッシュを気にしないことを願っていますね。 – user9993

これは少し遅れていますが、すべてのスタイルが適用される前にページがレンダリングを開始しているように見えます。これを解決するには、単にすることができますmountあなたのビューのインスタンスonload：

import App from './components/App.vue' 

const vm = new Vue({ 
    render: h => h(App) 
}) 

window.onload = function() { 
    vm.$mount('#app'); 
}

出典

2018-01-10 14:20:01

v-クロークを無視してVuetify

答えて

関連する問題