In order to go through the next set of examples and the next concepts, it really is best to be able to work with some dynamic behavior, and that's what events allow us to do so. I'm going to start off by implementing a button in our index.html and I'm going to place above that show image and in fact I'm going to create an entire div that I'm going to put the button inside of.

index.html

<div>
  <button>Toggle Image</button>
</div>

Now, this is going to hopefully be a very helpful guide because when I've spoken with developers and especially developers that are moving away from tools like JQuery and moving toward tools like Vue one of the very first things they looked to see how they can do it is to build out a toggle feature. This is very common in most applications so let's see how we can do that and we're going to leverage directives and events.

So let's see how we can listen for an event inside of our button.

index.html

<div>
  <button @click="imgToggleClick">Toggle Image</button>
</div>

So what I'm doing here is I'm setting up when I say @click I'm setting up a Vue event listener. So now with our component is going to be able to do is whenever I click on this button it is going to call a function or a method called imageToggleClick right here.

Let's test this out to make sure that it is working, and inside of app.js come down to your method list and right after greeting, let's create this method.

app.js

new Vue({
  el: "#app",
  data: {
    name: "Kristine",
    imgWidth: 150,
    showImg: true
  },
  methods: {
    greeting(nameFromView) {
      return `Hi, ${nameFromView}`;
    },
    imgToggleClick() {
      console.log('img toggle clicked');
    }
  }
});

OK we should have a button here. And then if you come in click on the console. Now we should be able to see our little output something click on toggle image.

And there you go. That means everything's wired up properly and our click event listener is working. So that's a first part of what we wanted but this is only one part. Now we want to actually change them behavior. So inside of here, let's actually get rid of this console log statement and I'm going to build out a full conditional and I'm going to take a little bit longer building this one out and then I will show you a very cool shortcut.

So I'll say if (this.showImg) and I don't have to say is equal to true or anything like that, inside of modern javascript if you have some kind of boolean value like we have right here and say if this or if whatever that value is if it's true the entire system is or this entire conditional is going to be true if it's false it's going to resolve to false. So I can just say if (this.showImg).

So this is referencing the show image that we have right here and I'll say if that is the case what I want to do is say this dot show image and change this to false and then afterwards I'll say else and then just copy this and then say this show image is equal to true.

app.js

new Vue({
  el: "#app",
  data: {
    name: "Kristine",
    imgWidth: 150,
    showImg: true
  },
  methods: {
    greeting(nameFromView) {
      return `Hi, ${nameFromView}`;
    },
    imgToggleClick() {
      if (this.showImg) {
          this.showImg = false;
      } else {
          this.showImg = true;
      }
    }
  }
});

So all I'm doing here is toggling the value it checks to see if show image is true, and if it is it changes it to false, and if it's not it changes it to true. So let's switch back to the browser and now if I click on toggle image you can see it hides or it shows that image as many times as you toggle it.

So that is cool and it's completely functional and it's perfectly fine if you do it this way. But there is even a better way or I should say a more efficient way of calling this conditional.

app.js

new Vue({
  el: "#app",
  data: {
    name: "Kristine",
    imgWidth: 150,
    showImg: true
  },
  methods: {
    greeting(nameFromView) {
      return `Hi, ${nameFromView}`;
    },
    imgToggleClick() {
      this.showImg = !this.showImg;
    }
  }
});

Let's test it out and click on toggle image and that's working. So we were able to take about five lines of code and condense it down into a single line. Now this syntax is not something specific to Vue. All we're doing here is we're setting a variable and then we're setting it equal to whatever the opposite is of that variable. Now this is something you can only do with boolean so you can only do this with a variable or some kind of data attribute that only has a true or false value.

It wouldn't work properly for strings or integers or anything like that but what you can do when you have a true or false. It's going to take and say this.showImg so whatever showImg is, and it's going to give you the opposite of that. And if you want to test that out you could come into any browser's console and say let someVal = true; and then I say !someVal you can see that it returns false.

Typically, whenever you have an exclamation mark like this. It's usually referred to as a bang, so we're saying !(bang)someVal which is going to flip the value. So if it started as true it will be false and vice versa. So that's how we're able to get this behavior right here with only just a single line of code. So that is a basic introduction to how to implement a click listener inside of Vue.

Resources

• Source Code