How to trigger input field change with Google Chrome autofill in Vue.js

in General Write a comment

In this tutorial, you’ll learn how to detect Google Chrome autofill in Vue.js.

Table of contents hide

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

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment