Issue

This Content is from Stack Overflow. Question asked by Sugafree

I was wondering which is the best practise to trigger input validation in Vue JS, using events such as onchange, keyup or having watchers on each property? Let`s assume that you only have around 20 inputs to deal with.

Solution

As you said you might have n number of inputs in your form on which you want to add validation. I think watcher is a good feature to use as it will update every time any changes happen in the form data.

In your data object, You can create one formData object which will contain all the input field properties and then you can put a watcher on formData.

Live Demo :

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>

This Question was asked in StackOverflow by Sugafree and Answered by Rohìt Jíndal It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.