Conditional rendering using v-if

web
mobile

Author: Dawid Adach

-

Since we know how to dynamically render Events from an array, let's give some shape to our app.

1. Style Event component

  1. Let's import Badges and Icons from the mdbvue library in Event.vue
  2. 
     <script>
    import { mdbBadge, mdbIcon } from "mdbvue";
    
    export default {
      name: "Event",
      components: {
        mdbBadge,
        mdbIcon
      },
      props: {
        index: {
          type: Number
        },
        time: {
          type: String
        },
        title: {
          type: String
        },
        location: {
          type: String
        },
        description: {
          type: String
        }
      },
      methods: {
        onDelete() {
          this.$emit('delete', this.index);
        }
      }
    };
    </script>
      

    We will use them within our template.

  3. Update the template with the following HTML code:
  4. 
     <template>
      <div>
        <div class="media mt-1">
          <h3 class="h3-responsive font-weight-bold mr-3 pt-0">{{time}}</h3>
          <div class="media-body mb-3 mb-lg-3">
            <mdb-badge tag="a" color="danger-color" class="ml-2 float-right">-</mdb-badge>
            <h6 v-if="title" class="mt-0 font-weight-bold">{{title}}</h6>
            <hr class="hr-bold my-2">
    
            <p class="font-smaller mb-0">
              <mdb-icon icon="location-arrow"/> {{location}}
            </p>
          </div>
        </div>
        <p class="p-2 mb-4 blue-grey lighten-5">{{description}}</p>
      </div>
    </template> 	
      

    Now our app starts looking better.

    App preview

    However, you probably noticed that some of the Events don't have a location nor description but we still display a placeholder for them. This doesn't look nice, so in order to fix it we will use another Vue directive - v-if

2. v-if directive

One of the reasons why Vue has grown so fast recently is the fact that it comes with a variety of predefined directives like v-for which you already know. In this lesson, we will learn how to use v-if, v-else and v-else-if directives.

Let's have a look at our description paragraph:


<p class="p-2 mb-4 blue-grey lighten-5">{{description}}</p>
  

We can easily define whether we want to render an entier paragraph using a simple if condition:


 <p v-if="true">I am rendered!</p>
 <p v-if="false">I am not :(</p>
  

And below is an example of our description paragraph:

v-if

Of course we don't want to set it globally, instead we want to display the paragraph depending on whether a description prop exists. In order to do that we can simply provide it as an argument to the v-if function:


<p v-if="description" class="p-2 mb-4 blue-grey lighten-5">{{description}}</p>
  

And use the same mechanism for location


<p v-if="location" class="font-smaller mb-0">
  <mdb-icon icon="location-arrow"/> {{location}}
</p>
  

Which solves our issue:

Hidden empty nodes

Note:
while using v-if directive we don't use Mustache syntax, instead we directly provide the variable name in between double quotes ("").

3. v-else

Sometimes, instead of hiding empty elements you may wish to display some alternative content (i.e. if there is no image in your blog post, you may want to display a default one).

In Vue you can easily do this using the v-else directive:


<template>
  <div>
    <p v-if="false">When v-if is true I am visible</p>
    <p v-else>But when it's false, it's my airtime!</p>
  </div>
</template>
  

Preview:

v-else

4. v-else-if

You may also end up in a situation where one "if" is not enough. I.e. imagine you have a list of authors and you want to render a different avatar for each author but still, if the authour is anonymous you want to display a default Avatar.

Again in Vue, you can very easily achieve that by using the v-else-if directive:


<template>
  <div>
    <div v-if="true">A</div>
    <div v-else-if="false">B</div>
    <div v-else-if="false">C</div>
    <div v-else>Not A/B/C</div>
  </div>
</template>
  

Preview:

v-else-if

Exercise:
Check yourself - which value will be rendered if all conditions are set to true? You can submit your answer while rating this lesson. Please rate it using the stars below. When you vote, you will be able to leave the note where you can give extended feedback and provide the answer.

Your feedback is very important to us. Please help us in making our tutorials better.


Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...