条件渲染以在vue中显示组件

Question

I have a parent comp which content should be displayd conditionally

when the userinput variable is false
The <div class="parent"> should be removed and the PopUp component displayed

I tried to use `v-if` but dont know how to remove the entire div with it elements

I could only change single elements with v-if else

parent comp

<template>
    <div>
        <button>x</button>
        <p>errorMessage</p>
    </div>
</template>

child component - PopUp

 <template> <div> <button>x</button> <p>errorMessage</p> </div> </template>

Answer 1

Add v-if="userinput" doesn't work?

If I understand what you want, you should have something like this:

 // parent comp <template> <div> <h1>header</h1> <div v-if="userinput" class="parent"> <h2>infos</h2> <button>x</button> </div> <PopUp v-else/> </div> </template>

Do not hesitate to read the Vue.js documentation