javascript - Vue 内联返回方法

Question

我发现这个解决方案只接受输入中的数字。

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
  return true;
}

<input type="text" name="someid" onkeypress="return isNumberKey(event)" />

我尝试以 Vue 方式应用它:

new Vue({
  el: '#app',
  methods: {
    isNumberKey(evt) {
      var charCode = (evt.which) ? evt.which : event.keyCode
      if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
      return true;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="text" name="someid" @keypress="return isNumberKey($event)" />
</div>

我收到此错误:避免使用 JavaScript 关键字作为属性名称:表达式 @keypress="return isNumberKey($event)"中的“return”

那么，我该如何完成这项工作呢？

JSFiddle:http://jsfiddle.net/xr69Lhaw/1/

Answer 1

Vue 元素绑定(bind)将对表达式求值，但使用 return 关键字的表达式会使 Vue 无法正确执行。

Vue 绑定(bind)很乐意接受方法引用。所以从技术上来说你想要的是:

<input type="text" name="someid" @keypress="isNumberKey" />

请注意，我们还删除了实际调用 isNumberKey($event) 的表达式。简而言之，提供对该方法的引用，Vue 将调用 isNumberKey 并向其传递一个 Event 对象作为第一个参数。

现在，我不确定简单地返回 false 是否会取消按键(如果是，请给我留言)。但我确信使用 preventDefault() 可以解决问题，因此您可以在技术上重写您的函数，如下所示:

isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    evt.preventDefault();
}