Uncategorized · May 11, 2021

Fixed for v-model not sync with autofill data in iOS input fields

When you create login form for iOS Vue app, you may facing with the problem that autofill in your form not sync with data in v-model. So you need to edit the form once before you submit form which is not a good UX.

Image: unsplash


When you have a regular form in Vue like below.

<form action="" class="box" @submit.prevent="">
<input type="text" v-model="username" />
<input type="password" v-model="password" />
<button class="button is-success" @click="checkLogin">

And this is your script part.

export default {
  methods: {
    data() {
        return {
            username: '',
            password: '',
    checkLogin() {
      // DO SOMETHING WITH this.username
      // DO SOMETHING WITH this.password

The problem is this.username and this.password WILL NOT get correct data from input fields which filled by autofill feature of mobile browser in iOS.


We can used $refs to push the values from autofill fields into model.

First, put ref into your input fields.

<input type="text" v-model="username" ref="username" />
<input type="password" v-model="password" ref="password" />

Then, assigned values from input fields to model

checkLogin() {
      // DO SOMETHING WITH this.username
      // DO SOMETHING WITH this.password

This will actually solve the problem which happen with mobile web browser in iOS platform.

Hope this help.