<!DOCTYPE html>
<html>
<head>
<title>Passing The Event Object + Other Argument</title>
<style>
#app {
border: dashed black 1px;
width: 180px;
padding: 10px;
}
#app img {
width: 100%;
}
#green {
background-color: lightgreen;
display: inline-block;
}
</style>
</head>
<body>
<h1>Example: Passing an Argument and the Event Object with a Method</h1>
<p>In this example we see that it is possible to send both the event object and a text as an argument with a method. To do this we must use the reserved name for event methods: '$event'.</p>
<p>Click on the tiger image:</p>
<div id="app">
<img src="img_tiger_square.jpeg" id="tiger" v-on:click="myMethod($event,'Hello')" width="733" height="733">
<p>Here is the message sent with the method, and the id of the img tag:</p>
<p id="green">"{{ msgAndId }}"</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
msgAndId: ''
}
},
methods: {
myMethod(e,msg) {
this.msgAndId = msg + ', '
this.msgAndId += e.target.id
}