In this article, we will make a simple component that will help us to create a list part of the ToDo List. This tutorial will go in three parts where we will look into the various aspects of the Vue framework and try to learn the various ways in which certain things can be created. Components are the basic building blocks of a Vue component. We will decompose these elements and make individual components that will join together in order to create a Todo List. Let’s get started by creating the components.

Create Basic Component in Vue

In VueJS the most basic way to create a component is as follows, in this example you see that we use the Vue instance with predefined values. So in this particular code list-item is the name of the Component. This component will help us to represent a list.

This is a global component. Any global component can be instantiated using the above code. Basically it turns out to be something like given below

So the above code creates a simple component now let’s wrap it into an app using the code below.

This will give you a simple list with one list item. The HTML that can represent the List item will be like given below.

ToDo List Vue

ToDo List Vue

Now let’s go to Stage Two of this exercise. We will try to repeat a list of items inside the list-item component. This can be achieved by adding a property to the list-item . Properties can add different attributes to the component. So let’s check out the properties as they are added to the component. The code below will help you do that. It adds a property called todo to the component and helps us to inject data into the component.

In order to inject data into the component, you can create a JSON object which carries the list of things you want to do and then binds it to the property todo of the component. So let’s have a look at the parent or the wrapping component. This can also be called as the ROOT component. The root component holds the list-item component that we created. So the ROOT Vue component goes as such.

Now it’s the time to bind this data to the properties. This will give us the result that we are hoping for so long. Let’s go ahead and bind these two and the resultant will be something as follows.

With the above code complete you have a perfect place where all these things merge together and come to shape. You can check out this entire work on JSFiddle or you can see below screenshot.

ToDo Component using VueJS

ToDo Component using VueJS

Let’s make the list Dynamic

In order to make the list dynamic, we will be using a simple input box and append the data to the existing list. For this particular exercise, we will have a look at methods as well as the way in which the List can be manipulated using the methods that the component provides. Here in this example, we will target the ROOT component in order to add custom methods to it so that we can manipulate the data within.

From the above code you can infer the following:-

  1. methods property can be added as an option to the Vue constructor in order to add methods that will be able to access the data properties of Vue component as shown above.
  2. The method  addToList() is a pretty simple method which picks the data which is bound to the input box using v-model (For reference please visit here), it picks the value to the input box and adds to the list of existing values. The HTML is pretty self-evident where various directives are being used.
  3. Reference to some of the directives is as follows:-
    1. v-on:click  – handled the click event or any other event instead of click, if provided.
    2. v-for for iteration of an array in the UI
    3. v-bind binds the property values to the component
  4. This will allow us to add list messages through the input box. Let’s check out a sample application at JSFiddle or you can have a look at the GIF shown below.
    ToDo List using VueJS

    ToDo List using VueJS


Now you can go ahead and check this out in action. In the next upcoming installment, we will go ahead and delete the post and then add few features. These will help you to get started with the VueJS framework. Soon we will try to migrate to more advance concepts and accomplish even more.

You can always check out the contents which were done previously on this website with respect to VueJS or just check out the individual posts on each topic.

  1. An Introduction to Vue Framework
  2. Getting started with Vue using Fiddle
  3. Learn Fast Handling User Inputs & form bindings using Vue
  4. Easily Bind Select and Multi-select using Vue

We would request you to share the post if you like it and dont forget to comment and subscribe for out post.


Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This