【问题标题】:How to access event object in a method with debounce - Vue如何在具有去抖动的方法中访问事件对象 - Vue
【发布时间】:2019-05-13 03:47:58
【问题描述】:

无法在去抖动方法中获取event 对象:

methods: {
  fetchData: _.debounce(function(e) {
    console.log(e) // return undefined
  }, 500)
}

是否可以在方法中访问事件对象?我的目的是检查按下的键码是什么:

if (e.keyCode >= 65 && e.keyCode <= 80) {
  // do some stuff
}

我这样调用方法fetchData

<input @keyup="fetchData()" v-model="name" type="text">

【问题讨论】:

  • 如何调用methods.fetchData?
  • @Justcode,更新了答案。
  • 是的,我希望它能以这种方式工作,但它不适用于 Vue。
  • 你能创建 jsfiddle/sn-p 来重现问题吗?

标签: javascript vue.js lodash


【解决方案1】:

这里是 vue js 示例,缺少 @keyup="fetchData($event)" 将事件传递到 debounce

new Vue({
  el: '#app',
  data() {
    return {
      keywords: ''
    }
  },
  methods: {
    fetchData: _.debounce(function(e) {
      console.log(e.keyCode) // return undefined
    }, 500)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <input id="textInput" @keyup="fetchData($event)" />
</div>

【讨论】:

  • 对,问题发生是因为我使用了() 圆括号,它被视为带有空参数的内联处理程序,因此即使是event 对象也没有传入。您有两个选择: 1 - 删除括号,2 - 如果您打算使用内联处理程序,请添加 $event 参数。
  • @AlexanderKim 完全正确!
猜你喜欢
  • 2016-10-01
  • 2017-07-08
  • 2021-02-05
  • 1970-01-01
  • 2015-06-24
  • 1970-01-01
  • 1970-01-01
  • 2015-04-12
  • 1970-01-01
相关资源
最近更新 更多