Templates, loops and conditions with VueJS

Today we will see how to use the templates, loops and conditions under viewJS.
We will start again from the code created in the previous tutorial.

How to map a property to an element of your template

The goal of the game under VueJS view is to make sure that your properties are used by the elements in your template to make them dynamic. Thus, we will be able, for example, via a form, to modify the value of a title (which will be a data in your VueJS application). VueJS will see that the value of your data "title" will be changed so it trigger the modification of your template accordingly. You will feel like editing your title in "real time". We will see how to do this in this first step of this tutorial.

We will start by creating our title attribute and display it. Edit your component src/App.vue like this:

<template>
  <div id="app">
    <h1>{{ title }} </h1>
  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application'
        }
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

No need to re-explain what we do here, because you followed the previous tutorial :)
So we said VueJS here that in the H1, it must put the content of the value of our property "title". Each title change will make it update the H1.

Edit a VueJS property using a form

We will now add our form which will modify the value of our property "title". To do this, we will define a v-model attribute, which allows to connect the value of a property to our input.

<template>
  <div id="app">
    <h1>{{ title }} </h1>
     <input v-model="title">
  </div>
</template>

By default the value of your text field will be "Title of my application" and if you change this value, the value of the H1 will be modified at the same time. Which gives you the impression of "real time" that we like so much in VueJS.

Here is the result:

Looping with VueJS

Now how do I view the contents of an array with VueJS? Suppose we have a list of tasks to do and we want to display them one by one, here's how.


The first step will be to create our tasks list in the data like this:

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application',
          tasks: [
            { title: 'Clean my room' },
            { title: 'Go to the grocery' },
            { title: 'meeting with JP' },
            { title: 'Go to the dentist' }
          ]
        }
  }
}
</script>

Then we will display them by modifying our template like this:

<template>
  <div id="app">
    <h1>{{ title }} </h1>
     <input v-model="title">

    <h2>Task List</h2>
     <ul id="task-list">
       <li v-for="task in tasks">
         {{ task.title }}
       </li>
     </ul>

  </div>
</template>

Here I added an Ul in which I added an element li that contains the attribute v-for which works like a foreach, this allows you to loop on the elements of my data tasks. Each element will be accessible inside of this loop by calling the variable "task" (which will be a javascript object with a title property).
I then display the title property of my "task" object inside.

IF with VueJS

Now that we posted our list of tasks to do, we will put the task "meeting with JP" in red. For this in our loop we will test if the title of the task is "meeting with JP" and if so, set it to red. If not we do nothing.
For this we use the directive v-if and v-else like this:

      <span v-if="task.title == 'meeting with JP'" style="color:red;">
            {{ task.title }}
      </span>
      <span v-else>
            {{ task.title }}
     </span>
         
 

It gives us for our application, a file src/App.vue like this:

<template>
  <div id="app">
    <h1>{{ title }} </h1>
     <input v-model="title">

    <h2>Task List</h2>
     <ul id="task-list">
       <li v-for="task in tasks">

          <span v-if="task.title == 'meeting with JP'" style="color:red;">
                {{ task.title }}
          </span>
          <span v-else>
                {{ task.title }}
         </span>

       </li>
     </ul>

  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application',
          tasks: [
            { title: 'Clean my room' },
            { title: 'Go to the grocery' },
            { title: 'meeting with JP' },
            { title: 'Go to the dentist' }
          ]
        }
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here is the result :

Show or hide an item with the VueJS v-show directive

The v-show directive allows you to show or hide an item based on a property.
Imagine that we want to hide the "Go to the grocery" spot, we add in each task a "display" property, which will be true or false.

<script>
module.exports = {
  data: function() {
       return {
          title: 'Titre de mon application',
          tasks: [
            { title: 'Clean my room', display:true },
            { title: 'Go to the grocery', display:false },
            { title: 'meeting with JP', display:true },
            { title: 'Go to the dentist', display:true }
          ]
        }
  }
}
</script>

We use the v-show directive at the if level, this directive will add a css display attribute to true or false depending on the condition you put in it.
Here we will tell her to display our items if task.display is true.

<span v-if="task.title == 'meeting with JP'" style="color:red;" v-show="task.display==true">
    {{ task.title }}
</span>
<span v-else v-show="task.display==true">
    {{ task.title }}
</span>

Here is the result:



And it works !

Congratulations, you now know how to make an IF and a FOR, use a property and modify its value via a form with VueJS!
This is the end of this tutorial, do not hesitate to leave your comments and ask your questions. The code can be downloaded below.