BarryJames
4 months ago
276
6
Vue

Vuelidate and @blur not working correctly.

Posted 4 months ago by BarryJames

Hey coders! I'm building a Vue front-end using a Laravel back-end and I seem to have run into a problems:

My @blur event runs properly on every property except for my custom validation 'unique' - which sends a GET request on every keystroke.

I have Googled for days without finding anything that mentions this and would really appreciate your help on this :)

Ok so take into consideration that I pass two props into this component with an array of users and a number containing the selected user's index in that array...

Here is my simplified script in my component for Edit User:

<script>
import { required, email, minLength } from 'vuelidate/lib/validators'
import axios from 'axios'
export default {
  data() {
    return {
      name: this.users[this.selectedUser].name,
      email: this.users[this.selectedUser].email
    }
  },
  props: {
    users: {
      type: Array,
      required: true
    },
    selectedUser: {
      type: Number,
      required: true
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(2)
    },
    email: {
      required,
      email,
      unique: value => {
        if (value === '') return true
        return axios.get('email-exists?email=' + value)
          .then(response => {
            return !response.data
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  },
  methods: {
    updateUser() {
      // axios request...
    }
  }
}

And here is my simplified HTML in my component in Edit User:

<template>
  <form @submit.prevent="updateUser">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" id="name" class="form-control" :class="{'is-invalid': $v.name.$error}" @blur="$v.name.$touch()" v-model="name">
      <span v-if="!$v.name.error" class="invalid-feedback" role="alert">
        <strong v-if="!$v.name.minLength">Please enter a valid first name</strong>
        <strong v-if="!$v.name.required">Please enter your first name</strong>
      </span>
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" class="form-control" :class="{'is-invalid': $v.email.$error}" @blur="$v.email.$touch()" v-model="email">
      <span v-if="!$v.email.error" class="invalid-feedback" role="alert">
        <strong v-if="!$v.email.email">Please enter a valid email address</strong>
        <strong v-if="!$v.email.unique">This email address already exists</strong>
      </span>
    </div>
    <button type="submit" class="btn btn-primary" :disabled="$v.$invalid">Update User</button>
  </form>
</template>

Thank you in advance! Maybe I am missing something here?

Please sign in or create an account to participate in this conversation.