Блог

Кажется, это проблема только с Chrome, потому что я не вижу этой проблемы в Firefox. Я использую Vue 2.6.11, и у меня очень простая страница входа в систему:

 <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> 

У него есть ввод имени пользователя и пароля, которые были предназначены для автозаполнения. Тем не менее, я вижу, что Chrome выполняет их автозаполнение, но v-model НЕ обновляется, поскольку на выходе v-model не отображается имя пользователя, а консоль не регистрируется. Как только я нажимаю на что-то еще, и ввод теряет фокус, v-model обновляется и выводится журнал консоли. Смотрите этот gif:

Я попытался поместить атрибут «name» на входные данные, как предполагают некоторые поисковые запросы Google, но это не сработало.

Почему это происходит и как я могу этого избежать?