In this tutorial, you’ll learn how to detect Google Chrome autofill in Vue.js.
Problem
One of my Vue.js projects had a simple HTML form, similar to this:
<form class="needs-validation">
<div class="form-group">
<input
v-model="form.first_name"
type="text"
class="form-control"
required>
<label>First name</label>
</div>
<div class="form-group">
<input
v-model="form.last_name"
type="text"
class="form-control"
required>
<label>Last name</label>
</div>
<button type="button" class="btn btn-primary btn-block btn-lg" @click="submit">Submit payment</button>
</form>
I used Chrome autofill to autocomplete first and last name fields but v-model didn’t update. Both fields were filled but v-model didn’t update.
Solution
The solution is quite simple. Make sure you add a name
attribute for each input field. That way your v-model or computed properties will update when you use Chrome auto-fill.
<form class="needs-validation">
<div class="form-group">
<input
v-model="form.first_name"
type="text"
name="first_name"
class="form-control"
required>
<label>First name</label>
</div>
<div class="form-group">
<input
v-model="form.last_name"
type="text"
name="last_name"
class="form-control"
required>
<label>Last name</label>
</div>
<button type="button" class="btn btn-primary btn-block btn-lg" @click="submit">Submit payment</button>
</form>
Note the name="first_name"
and name="last_name"
form attributes.
I hope you learned something new today. And if you did, please leave a comment and check other Vue.js tutorials.
Cheers,
Renat Galyamov
Want to share this with your friends?
👉renatello.com/detect-chrome-autofill