Adding a method

In the last video we learned about directives. Let's now use directives to add some dynamic functionality to our app.

Changing total

What we're going to try to do now is to increase the value of the total.

Over here in our products column, let's get rid of this paragraph which says "Products go here" and let's put a button here instead. Inside we'll add the text "Add to Cart".

index.html

<div class="products">
  <button>Add to cart</button>
</div>

When a user clicks this button, a click event is emitted in the DOM. We can get Vue to respond to that by adding a directive to the button called v-on.

This directive is responsible for event handling. It requires you to provide an argument, which will be the event that you want to listen to. In this case, it's click.

You then need to assign an expression to the directive, which will be the event handler. Here you can putany kind of JavaScript expression.

As a test, let put the expression total += 9.99. That will increase the value of our total property by 9.99.

Let's save that and see what happens.

index.html

<div class="products">
  <button v-on:click="total += 9.99">Add to cart</button>
</div>

Testing button

Click the button, and there we go, the total is updating!

This, in my opinion, is the first really cool thing about Vue. Data is "reactive".

As the value of total changes, the page is automatically updated to reflect the new value.

That's why, after we click the button and the handler experssion is evaluated, we see that change in the shopping cart instantly.

We'll talk about reactivity in more depth later in the course.

Methods

Before we move on, it's not good to have too much JavaScript logic in the template, so let's actually remove that expression and instead call a method addToCart.

index.html

<div class="products">
  <button v-on:click="addToCart">Add to cart</button>
</div>

Now we go to our script file and we can add another property to the Vue config called methods. Unlike data, methods gets assigned a plain object where any properties that you put on this object will then be methods you can use in your app.

public/script.js

Vue.createApp({
  data() { ... },
  methods: {
    
  }
}).mount("#app");

Let's create this method addToCart and make it a function property.

Inside the function body, let's add our expression from before. The difference, though, is that we need to add this. in front of the total. I'll explain why in a moment.

public/script.js

methods: {
  addToCart() {
    this.total += 9.99;
  }
}

Firstly, let's check that it works. It does; it's exactly the same as before.

this keyword

Okay, why do we need the this keyword in the script file but not in the template?

Firstly, Vue binds a context object to all of its functions. That context object is accessible via the this keyword.

This is a necessary part of the design because obviously you'll need to refer to other parts of the configuration object from within the configuration object.

One possibly confusing thing, though, is that the context object is not the same as the configuration object.

As an example of this, the data properties and methods we define in the configuration object are root properties of the context object.

That's why you can put this.total in a method and access that value.

One very cool thing, though, is that expressions you write in the template are evaluated in such a way that you don't need to specify the this keyword.

Just putting addToCart will be enough for Vue to know what you mean. That's really handy because it keeps the template much more succinct.

In the next lesson, we're going to add some products to our store.