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)
newVue({
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: {
asyncgetData() {
// await axios ...do some request...this.isLoading = false
}
}
});<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><divid="app"></div>
Post a Comment for "Vue & Conditional Rendering With Template Tag"