conditional rendering to display component in vue-CodePudding

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>
        <h1>header</h1>
        <div class="parent">
            <h2>infos</h2>
            <button>x</button>
        </div>
    </div>
</template>

<script>
import PopUp from './PopUp.vue';

export default {
    data() {
        return {
            userinput: true,
        }
    }
}

</script>

child component - PopUp

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

CodePudding user response：

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