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.

Problem

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">
</form>

And this is your script part.

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

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.

Solution

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() {
      this.username=this.$refs['username'].value
      this.password=this.$refs['password'].value
      
      // 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.