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

Question

我的Vue应用中只有一个输入。它是组件的一部分，它的设置类似于documentation，用于“带有组件的v模型”的使用：

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 guide问题。