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.
