Respond to a mouseover event in Vue with the v-on directive
We'll look at another HTML event and use the v-on directive to handle mouse over events.
While doing so we'll see a few concepts that you've been introduced to so far in the course. We will be iterating over a list of data that has been added and then create a updateImage method that will replace the page image with the image of the ticket that we mouse over with the @mouseover event.
Instructor: [0:00] I'm going to add some ticket types to my data. These are bronze tickets, silver tickets, and gold tickets. I've got their id. I've got their name. I've got an image that I'm associating with each of them. It's another film, but they're slightly different sizes, so this means they'll render slightly different pictures. I've got a ticket number to each of them, and I have descriptions attached.
[0:20] What I'd like to do is, let's get rid of these buttons for the moment, I'd like to have an unordered list which I'm going to have a class of ticket types to. For each ticket type, I'm going to have a list item, give it a class of ticketSelector. I'm going to use the v-for directive to get the type and ticket types.
[0:35] Remember, these ticket type has to match the key that we have in our data props, but the type can be anything we like it, but type and ticket type seems to sound good to me. You could have ticket type, or something like that. For each of those, I just want the name, type.name. We've got bronze, silver, and gold are our ticket type.
[0:57] What I'd like to happen is the image that's associated with each of these, I would like it to update this image to be replaced by one of those three. To do that, I'm going to add a new method. This method is going to update the image, and it's going to take the id of the ticket type and use that to update the image.
[1:17] How is it going to update the image? It's going to use this.image, and it's going to take this.ticket types, and it's going to filter them by type. It's going to say, "Does your id equal the id I'm parsing?" That's going to return an array with a single item in it. You want the zeroth item of that array. We're going to take the image from that zeroth item.
[1:38] This.image will be updated by the image that's in our array. If we're parsing bronze ticket, this will be reduced to an array with the object of bronze ticket in it. We get the zeroth item, which gives us this object, and we get the image which is going to be this new film image.
[1:55] Back in our HTML then, we are going to want to bind an event to that function. Let's bind the mouseover event. Remember this is v-on:mouseover or @mouseover. Those two are equivalent. v-on:mouseover or @mouseover =, that's going to equal updateImage. Because we're in the list element that's being defined by the v-for, this type is in scope. We can parse type.id. We can save that.
[2:24] Every time our mouseover event is triggered, our updateImage method is being called with the id related to that particular ticket type.