[Vuejs]-Vue : Conditional render of div based on v-if, But i dont want to show the div if it returns null

by

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.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/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>
👤palaѕн

3👍

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>
👤Reeye

Leave a comment