不能return空值到vue上的输入框

Question

我想做一个只输入数字的验证，每当有人输入一个字符串时，输入框就会被清除。

首先，我在 $event 上做了一个方法函数，像这样 (ps。我用的是 props)

<BaseInput
      :value="nama"
      @update="nama = ruled($event)"
      label="Nama"
      type="type"
/>

这是方法，我使用 RegExp 来检查 $event 值是否为数字。当它为 false 时，我 return $event 值为空字符串。

ruled(event) {
  console.log(event)

  var intRegex = new RegExp(/[0-9]/);
  var data = intRegex.test(event)
  if(!data) {
      alert("Value Must Number")
      event = ""
      console.log('masuk if' + data)
  }
  return event
}

但是没有清除输入框，有谁知道为什么会这样吗？

Answer 1

建议：

而不是 @update 你必须使用 @keypress 或 @change.
您可以使用 v-model 进行 two-way 数据绑定。

工作演示：

new Vue({
  el: '#app',
  data: {
    nama: ''
  },
  methods: {
    ruled(event) {
      var intRegex = new RegExp(/^\d+$/);
      var data = intRegex.test(this.nama);
      if (!data) {
        alert("Value must contain number");
        this.nama = "";
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input
      v-model="nama"
      @change="ruled($event)"
      label="Nama"
      type="text"
  />
</div>

Answer 2

正如 Creative Learner 所说，我必须只清除子组件中的输入框，所以我在我的子组件上做了这个

<template>
<input
  :value="value"
  :placeholder="label"
  @input="$emit('update', ruled($event))"
/>
</template>

这是方法：

    methods: {
      ruled(event) {
        //console.log(event)
            var val = event.target.value
            if(event.target.type == "number"){
                var intRegex = new RegExp(/[0-9]/);
                var intdata = intRegex.test(val)
                    if(intdata == false) {
                        error = "Value must contain number"
                        //alert("Value must contain number")
                        return event.target.value = ""
                    }
            }
      return val
      }
  }

非常感谢 Creative Learner 让我明白了

不能return空值到vue上的输入框

Can't return empty value to input box on vue

validation

vue.js