I am trying to hide a certain class on page load. The first two texts do not appear on page load, but somehow, the third text flashes on page load but it disappears after a few seconds since the other conditions of the other classes are being met. I would like it to be hidden on page load, only to appear if the v-else-if condition is met.
This is how my code looks like:
<div class="row">
<div class="cxs12" v-if="this.result1 !== this.result2">
<p>
text 1
</p>
</div>
<div class="cxs12" v-else-if="this.result">
<p>
text 2
</p>
</div>
<div class="cxs12" id="unavailable" v-else-if="this.result === undefined">
<p>
text 3
</p>
</div>
</div>
this.result is the return of an API call.
I have already tried adding v-cloak on both the template and the CSS, but it unfortunately does not work. Note that I am using Typescript, and not Vue.js.
Any idea what I could do to fix this?
You can try to set another condition on row, maybe something like following snippet if I understand you correctly:
new Vue({
el: '#demo',
data() {
return {
result: undefined,
result1: '',
result2: '',
loading: false
}
},
methods: {
apiCall() {
this.loading = true
setTimeout(()=> {
this.result = 1
this.loading = false
},2000)
}
},
mounted() {
this.apiCall()
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="row" v-if="!loading">
<div class="cxs12" v-if="this.result1 !== this.result2">
<p>
text 1
</p>
</div>
<div class="cxs12" v-else-if="this.result">
<p>
text 2
</p>
</div>
<div class="cxs12" id="unavailable" v-else-if="this.result === undefined">
<p>
text 3
</p>
</div>
</div>
</div>