[Vuejs]-Difference from @event="doThis()" & @event="doThis" in Vuejs

by

3👍

✅

Because the e which is the event object being handled is is undefined. You have to pass the object using global $event

<button type="button" @click="doThis($event)" data-name="test">Test</button>

Usually when you invoke the event handler manually is because you need to pass additional arguments to the function. As example

<div v-for="v in values" :key="v.id">
    <button type="button" @click="doThis($event, v)" data-name="test">Test</button>
</div>
👤Chay22

1👍

As I was typing this up, @Chay22 was able to help – for what it’s worth, here is an example:

[CodePen Mirror]

const vm = new Vue({
  el: "#app",
  data: {
    title: ''
  },
  methods: {
    doTheNeedful(e) {
      this.title = "Coming From: " + e.target.innerHTML;
      console.log(e);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <div>
    <button @click="doTheNeedful">doTheNeedful</button>
    <button @click="doTheNeedful($event)">doTheNeedful($event)</button>
    <div v-if="title">
      <p>{{ title }}</p>
      <h3>Check console for event info</h3>
    </div>
  </div>
</div>
👤Matt Oestreich

Leave a comment