Vue

by dauruk0512

HTML

<div id="app">
  <form @submit.prevent="submit">
    <div>
      <input type="text" v-model="username.value">
      <small>{{ username.error }} 
            {{ username.value }}
      </small>
    </div>
    <div>
      <input type="password" v-model="password.value">
      <small>{{ password.error }}</small>
    </div>
    <button type="submit">
      Submit
    </button>
  </form>
</div>

CSS

input {
  display: block;
}

small {
  color: red;
}

Vue

new Vue({
  el: "#app",
  data: {
    username: {
    	value: '',
      error: ''
    },
    password: {
    	value: '',
      error: ''
    }
  },
  methods: {
  	submit () {
    	// Misal response dari backend, setelah submit
      let response = {
      	data: [
        	{
          	field: 'username',
            message: 'Username error loh!'
          }
        ]
      };
      
      response.data.forEach(data => {
      	if (typeof this.$data[data.field] !== 'undefined') {
        	this.$data[data.field].error = data.message;
        }
      });
    }
  }
})