Question

我遇到了此错误

Cannot read property 'target' of undefined

带有@click事件，同时调用带有doThis()的方法。

但是doThis工作正常

我想知道两者之间有什么区别

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

还有

<button type="button" @click="doThis" data-name="test">Test</button>

使用此方法

methods: {
    doThis(e) {
      console.log(e.target.dataset.name);
    }
  }

Answer 1

因为e（正在处理的事件对象）是未定义的。您必须使用全局$event

传递对象

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

通常，当您手动调用事件处理程序时，是因为您需要将其他参数传递给该函数。例如

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

Answer 2

在我键入此内容时，@ Chay22能够提供帮助-值得说明的是一个示例：

[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>

与Vuejs中的@ event =“ doThis（）”和@ event =“ doThis”的区别

2 个答案: