Hello !
Did you try to wrap your axios call in a Promise and return it ?
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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 or to participate in this conversation.