文本输入的 "value" 属性不正确

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') 会产生相同的结果。填写正确表单值的前提只是让用户与页面进行交互。与解决方案不同，我确实需要完整的自动填充值；在启用 "submit" 按钮之前，我的登录表单需要使用该字段的内容向服务器发出请求。

Answer 1

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

文本输入的 "value" 属性不正确

Text input's "value" attribute is incorrect

javascript

forms

autofill

vue.js