文本输入的“值”属性不正确

Question

我的 Vue 应用程序中只有一个输入。它是组件的一部分，其设置类似于“v-model with components”的使用documentation：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

当页面加载时，这个输入显然填充了一个值（来自 Chrome 自动填充），但在我的代码中，我有以下语句：

setInterval(() => { console.log(document.querySelector('input').value); }, 50);

这个始终记录一个空字符串，即使我可以清楚地看到该输入填充了一个值。但是，一旦我在 Chrome devtools 中检查或引用该元素，setInterval 就会突然开始记录正确的值 (luke@deentaylor.com)：

由于一旦尝试调试问题就会消失，因此诊断非常困难。是什么原因造成的？

编辑：没关系，这种行为与元素本身的检查无关，控制台中的console.log('hi') 会产生相同的结果。填写正确的表单值的前提是用户与页面交互。与解决方案here 不同，我确实需要完整的自动填充值；在启用“提交”按钮之前，我的登录表单需要使用该字段的内容向服务器发出请求。

Answer 1

我相信这只是 Chrome 自动填充的预期行为。请参阅this 问题。