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>

我得到这个错误：avoid using JavaScript keyword as property name: "return" in expression @keypress="return isNumberKey($event)"

那么，我该如何做呢？

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

Answer 1

Vue元素绑定将计算表达式，但是使用return关键字的表达式使Vue无法正确执行。

Vue绑定很高兴采用方法参考。因此，您在技术上想要的是：

<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();
}

内联Vue返回方法

1 个答案: