Komponen.vue full

gistfile1.txt

<template>
<div>
   <div class="">
          <label >Username</label>
          <input type="text"   v-model="$v.username.$model">
          <small  v-if="!$v.username.required">Field is required.</small>
          <small  v-if="!$v.username.minLength">Username must have at least {{$v.username.$params.minLength.min}} letters</small>
        </div>
        <div class="">
          <label >Password</label>
          <input type="text"   v-model="$v.password.$model">
          <small  v-if="!$v.password.required">Field is required.</small>
          <small  v-if="!$v.password.minLength">Password must have at least {{$v.password.$params.minLength.min}} letters.</small>
        </div>
        <div @click="submitbtn">Send Data</div>
</div>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: {
      required,
      minLength: minLength(4)
    },
    password: {
      required,
      minLength: minLength(4)
    }
  },
  methods: {
   submitbtn() {
    this.$v.touch();
    if (this.$v.$error){
      alert("gagal kirim")
    }else{
      alert("terkirim")
    }
   }
  }

}
</script>