How do I use conditional rendering on template tag?

user_7791521 0
Viewed 7114

According to the Vue documentation I should be able to add the v-if condition to the <template> tag:

<template v-if="false">
  <div>Invisible text</div>
</template>

But this will not hide the element, however it does work when added to the child element:

<template>
  <div v-if="false">Invisible text</div>
</template>

Any suggestions?

I'm including the template in another .vue file:

<template>
  <div id="app">
    <H1 class= "main-title">Title</H1>
    <span class="components">
      <testtemplate></testtemplate>
    </span>
  </div>
</template>
vue.js
2 Answers

Had this problem with VUE3. Using SFC just nest tag template inside another tag template :

<template>
    <template v-if="false">
     You won't see this
    </template>
</template>
user_66189790
Related