This only seems to be an issue with Chrome because I am not seeing this issue in Firefox. I am using Vue 2.6.11, and have a very simple login page:
<template>
<div>
<input
id="username"
:value="username_field"
@input="user_field_change"
type="text"
autocomplete="username"
/>
<input
id="password"
v-model="password_field"
type="password"
autocomplete="current-password"
/>
<div>v-model of user: {{ username_field }}</div>
</div>
</template>
<script>
export default {
name: "Login",
components: {},
data() {
return {
username_field: null,
password_field: null,
};
},
methods: {
user_field_change(event) {
this.username_field = event.target.value;
console.log(`user change: ${this.username_field}`);
},
},
};
</script>It has username and password inputs which have been targeted for autocomplete. However, I am seeing that Chrome is autocompleting them but the v-model is NOT being updated as the v-model output is not showing the username and the console is not logged. Once I click on something else and the input loses focus, the v-model is updated and a console log is output. See this gif:
I have tried placing a "name" attribute on the inputs as some google searches suggest, but it has not worked.
Why is this happening, and how can I avoid it?