Vue & Conditional Rendering With Template Tag
I am trying to follow documentation: https://vuejs.org/v2/guide/conditional.html But for some reason my template is not working as expected, as soon as I put Copy
You basically asking vue.js for problems. Vue will stop parsing your template as soon as div with okBoom ends.
There are questions similar to mine all over the internet:
Solution in short. Wrap your template into master span, div or transition (this one however seems to be a bit hacky, on the other hand it won't generate unnecessary html tags).
Solution 2:
I use conditional template rendering for loaders (while a server request is taking place)
new Vue({
el: "#app",
template:
`<div v-else class='somePage'>
<template v-if="isLoading">
<div>LOADING...</div>
</template>
<template v-else>
<h1>title</h1>
<p>The final rendered result will not include the "template" element.</p>
</template>
</div>`,
data: () => ({
isLoading: true
}),
mounted() {
setTimeout(this.getData.bind(this), 1500);
},
methods: {
async getData() {
// await axios ...do some request...
this.isLoading = false
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
Post a Comment for "Vue & Conditional Rendering With Template Tag"