Get your own website Result Size: 625 x 565
x
 
<!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
      }