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

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

Incoming search terms: