javascript - Vue : Conditional render of div based on v-if, But i dont want to show the div if it returns null - Stack Overflow

I have the following html with conditional render using v-if

    <div v-if="showdiv">
        <p>Content 1 here</p>
    </div>
    <div v-if="!showdiv">
        <p>Content 2 here</p>
    </div>

In data variable I have set

data() {
  render {
     showdiv: ''
  }
}

So I have an api, whose response decides whether showdiv is false or true. But sometimes api is slow, then the value of showdiv should be null and none of the div must be shown, But in my case showdiv is taken as false and this get displayed

    <div v-if="!showdiv">
        <p>Content 2 here</p>
    </div>

I dont want both the divs to be displayed when the value is null.I only want to render the div if its true or false, in other cases let it not show. What i can do to achieve that ?

I have the following html with conditional render using v-if

    <div v-if="showdiv">
        <p>Content 1 here</p>
    </div>
    <div v-if="!showdiv">
        <p>Content 2 here</p>
    </div>

In data variable I have set

data() {
  render {
     showdiv: ''
  }
}

So I have an api, whose response decides whether showdiv is false or true. But sometimes api is slow, then the value of showdiv should be null and none of the div must be shown, But in my case showdiv is taken as false and this get displayed

    <div v-if="!showdiv">
        <p>Content 2 here</p>
    </div>

I dont want both the divs to be displayed when the value is null.I only want to render the div if its true or false, in other cases let it not show. What i can do to achieve that ?

• javascript
• vue.js

Share Improve this question Follow edited May 5, 2020 at 14:15 theFrontEndDev asked May 5, 2020 at 14:07 theFrontEndDevtheFrontEndDev 97322 gold badges2020 silver badges4444 bronze badges 2

• Have an isLoading flag and show loading when it is true and when it is false only then render your other divs. – Utsav Patel Commented May 5, 2020 at 14:11
• @UtsavPatel I dont want to set a loader for this api too as page takes too long to load if i have to wait for this api, I have loader in place already for the basic details to get loaded. I only want to render the div if its true or false, in other cases let it not show – theFrontEndDev Commented May 5, 2020 at 14:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can check explicitly if the typeof showdiv is boolean or not and based on that show the divs like:

<div v-if="typeof showdiv === 'boolean' && showdiv">
  <p>Content 1 here</p>
</div>
<div v-if="typeof showdiv === 'boolean' && !showdiv">
  <p>Content 2 here</p>
</div>

Demo:

new Vue({
  el: "#myApp",
  data: {
    showdiv: ''
  },
  async mounted() {
    // wait for 2 second
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.showdiv = true;
  },
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
  <div>
    <p>The content divs will show after few seconds . . .</p>
  </div>
  <div v-if="typeof showdiv === 'boolean' && showdiv">
    <p>Content 1 here</p>
  </div>
  <div v-if="typeof showdiv === 'boolean' && !showdiv">
    <p>Content 2 here</p>
  </div>
</div>

try like this:

<div v-if="showdiv === true">
  <p>Content 1 here</p>
</div>
<div v-if="showdiv === false">
    <p>Content 2 here</p>
</div>