Er is een divop mijn pagina die de foutmelding toont. Wanneer ik de pagina ververs, zal deze een tijdje verschijnen en daarna verdwijnen. Ik heb v-cloaktoegevoegd, maar het werkt niet.
dit is de code, showErrorMsgis onwaar
<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
<a href="#" v-on:click="showErrorMsg = false" class="del"><i></i></a>
<p v-text="errorMsg"></p>
</div>
Hoe dit op te lossen?
Antwoord 1, autoriteit 100%
Voeg deze code toe aan uw css-bestand
[v-cloak] { display:none; }
Gebruiksvoorbeeld:
<div class="xpto" v-cloak>
Hello
</div>
Deze richtlijn blijft op het element staan tot de bijbehorende Vue
instantie voltooit de compilatie. Gecombineerd met CSS-regels zoals
[v-cloak] { display: none }, deze instructie kan worden gebruikt om te verbergen
niet-gecompileerde snorbindingen totdat de Vue-instantie gereed is.
Antwoord 2, autoriteit 33%
Ik had hetzelfde probleem, en het was te wijten aan een conflicterende eigenschap displayop mijn div. Om het op te lossen, gebruikte ik de !importantvlag op de [v-cloak]als:
[v-cloak] {
display: none !important;
}
.my-class {
display: table-cell;
}
Antwoord 3, autoriteit 12%
Vue.js – 2.3.4, ik heb de v-cloaktoegevoegd aan de app-container, en dit toegevoegd aan de bovenliggende container, ik vind dat je de code niet herhaalt het DROOGhouden.
HTML:
<div id="app" v-cloak>
Anything inside gets the v-cloak
</div>
CSS:
[v-cloak] {
display:none;
}
Codepen-voorbeeld:
Antwoord 4, autoriteit 7%
Ik heb dit probleem opgelost door de CSS te herschrijven en een klasse toe te voegen aan het CSS-bestand
CSS:
[v-cloak] .v-cloak--hidden{
display: none;
}
HTML:
<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
<a href="#" v-on:click="showErrorMsg = false" class="del"><i></i></a>
<p v-text="errorMsg"></p>
</div>
Antwoord 5
Als je CDN gebruikt om Vue te krijgen en Bootstrap CSS gebruikt, dan kan de reden zijn dat je de Bootstrap CSS onderaan de body-tag laadt, en het terug verplaatsen naar de head-tag werkte voor mij. Zorg ervoor dat u dat vueJS-bestand in de knop laat zoals het is.
<HTML>
<head>
All link and script tag here
</head>
<body>
<div id='app' v-cloak>
{{ something }}
</div>
<script src="app.js"></script>
</body>
Antwoord 6
Ik heb een scenario waarin ik een zoekformulier heb en hieronder de resultaten met een v-if-blok, wachtend op indiening.
Ik heb de v-ifgewijzigd in v-show, dat leek te helpen. Ik heb de klasse v-cloak--hiddengeprobeerd, maar werkte ook niet (v-cloakis al gestyled naar display: none). Wat werkteblijkbaar werkte, was om de weergavestijl van de container voor gegevensresultaten in te stellen op geen en vervolgens bij het indienen van het formulier (in de processForm-methode), de weergave in te stellen op blokkeren en alles tonen de resultaten.
processForm() {
// reset page number on new search
document.getElementById("data-container").style.display="block"
this.pageNumber = 1;
this.remoteRequest();
},
Zonder die wijziging kon ik bij een volledige paginavernieuwing nogde snorren zien opkomen. Hier de volledige HTML-pagina, vereenvoudigd.
<div id="app" v-cloak>
<main class="main-section">
<form method="POST" class="p-4 text-center" @submit.prevent="processForm">
<button type="submit" name="button" class="btn btn-primary">
Find
</button>
</form>
<!-- Results -->
<div id="data-container" class="container-fluid pt-2 pb-4" style="display:none">
<div class="row">
<div class="col">
<div id="recordsContainer" v-show="totalInScreen > 0">
<div class="card mt-5" v-for="(result, index) in results" :id="'itm-'+index" :key="result.id">
<div class="card-body">
<div class="row">
<div class="col">
<h2 class="doctor-name">{{ result.doct_name }}</h2>
<h2 class="doctor-bio">Bio</h2>
<p>{{result.doct_bio}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
Antwoord 7
Helaas werkten de bovenstaande 2 antwoorden niet voor mij omdat het probleem iets anders was. Aangezien deze vraag op nummer 1 op Google verschijnt, dacht ik dat ik mijn oplossing zou delen.
Als je ergens een specifiekere css-regel voor weergave hebt gedefinieerd, wordt de v-cloak-functionaliteit verbroken. Echter! Wanhoop niet – kopieer dit gewoon naar je CSS-bestand en het zalwerken!
[v-cloak] .v-cloak--block {
display: block!important;
}
[v-cloak] .v-cloak--inline {
display: inline!important;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block!important;
}
[v-cloak] .v-cloak--hidden {
display: none!important;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden!important;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none!important;
}