Vue JS-最好是触发输入验证、对输入进行更改/按键事件，或者对其属性使用观察者

Question

我想知道在Vue JS中使用事件(如onchange、keyup(或在每个属性上使用watchers触发输入验证的最佳做法是什么？让我们假设您只有大约20个输入要处理。

Answer 1

正如您所说，您的表单中可能有n个要添加验证的输入。我认为watcher是一个很好的功能，因为每当表单数据发生任何更改时，它都会更新。

在您的数据对象中，您可以创建一个包含所有输入字段属性的formData对象，然后您可以在formData上放置一个观察程序。

实时演示：

var App = new Vue({
el: '#app',
data() {
return {
formData: {
name: 'Alpha',
age: 30
}
}
},
watch: {
'formData': {
deep: true,
handler(val) {
console.log(val)
}
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form>
<label for="name">Name
<input id="name" type="text" v-model="formData.name">
</label>Age
<label for="age">
<input id="age" type="number" v-model="formData.age">  
</label>
</form>
</div>