is there a way to hide a component in vue.js

Question

i am trying to hide a component if it has no data to show however all i get is a whitespace in between my other components.

component to hide

<template>
<div v-if="this.show === true">
    <NormalCard>
        <template slot="card-content">
            <div class="card-title">
                <h3>{{ response.name }}</h3>
            </div>
            <div class="funds" v-for="item in response.content">
                <div class="text">
                    <h3 class="fund-date">
                        {{ item.birthday }}
                    </h3>
                    <h3 class="fund-name">
                        {{ item.name }}
                    </h3>
                </div>
            </div>
        </template>
    </NormalCard>
</div>

mounted() {
    this.$http.get("/api/v1/widgets/upcomingBirthdays").then((response) => {
        this.response = response.data;
        console.log(this.response)

        if (this.response.content.length == 0){
            this.show = false;
            console.log(this.show)
        }
    });
}

parent where i use the component:

<template>
<div class="dashboard">
    <div class="grid-1">
        <div><TotalAum/></div>
        <div><TotalFunds/></div>
        <div><TotalEmployees/></div>
        <div><incidents-last7-days/></div>
    </div>

    <div class="grid-2">
        <div class="fund-cards"><funds-recently-started /></div>
        <div class="fund-cards"><funds-recently-ended/></div>
        <div class="grid-comments"><CommentsRecentlyAdded/></div>
        <div class="fund-cards"><LatestNews/></div>
        <div class="fund-cards"><MyFunds/></div>
        <div class="fund-cards"><UpcomingBirthdays/></div>
        <div class="fund-cards"><MyProspects/></div>
    </div>
</div>

i have tried to use v-show and v-bind as well but that didn't seem to work either, is there i way i could hide the component?

question from:https://stackoverflow.com/questions/65941563/is-there-a-way-to-hide-a-component-in-vue-js

Answer 1

Waitting for answers