Vue v-model에서 크롬 자동 완료를 감지하지 못함

Vue v-model에서 크롬 자동 완료를 감지하지 못함

Firefox에서는 이 문제가 발생하지 않기 때문에 Chrome에서만 문제가 발생하는 것 같습니다.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를 참조해 주세요.

일부 구글 검색에서 알 수 있듯이 "이름" 속성을 입력에 배치하려고 했지만 작동하지 않았습니다.

왜 이런 일이 일어나는지, 어떻게 하면 피할 수 있을까요?

언급URL : https://stackoverflow.com/questions/65413917/vue-v-model-not-detecting-chrome-auto-completion