Getting started with Vue.js - part seven

In the seventh part of the tutorial, we will go through how to insert a form and how they are connected to the information in the data object.


In this part we are going to learn how to use forms and how those are bound to the data object. We are going to create a form that controls the some of content of the card we have been creating.

The first we are going to do is to add some more HTML. Change the HTML code inside .columns to look like this:

Vue Hero - Introduction - Forms

Already now you can open index.html in your browser again and test. If you try to update the value in one of the input fields you'll see that the values of the card are also updated automatically. Isn't that just super cool?

Vue Hero - Introduction - Forms preview

Let's make it possible to add a interest

First, let's add one more input field and a button to the form.

Vue Hero - Introduction - Interest

When that's done we can add the variable bound to that input field to our data object and create the function that handles the method that's being called when you click the button. This is what the hero_app should look like now.

Vue Hero - Introduction - Binding

If you type something inside the interest field and then click add you will see that a interest/tag is added to the card. The number of interests also increases automatically. This is a part of the reactivity system from Vue which updates all places a value is being used once it's been changed.

Mini challenge

The challenge of this part is to create one more variable a place inside your data object. You will also need to show that variable a place in the card and add a input field in the form that is bound to this. This will not be a part of the course so when you're finished you can just remove it.


Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.