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

Question

I have a single input in my Vue app. It's a part of a component, which is set up like the documentation on the usage of “v-model with components”:

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

This input is clearly is filled with a value (from Chrome autofill) when the page loads, but in my code I have the following statement:

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

This consistently logs an empty string even while I can plainly see that that input is filled with a value. However, as soon as I inspect or reference the element in Chrome devtools, the setInterval suddenly begins logging the correct value ( luke@deentaylor.com ):

Since the problem disappears as soon as one attempts to debug it, this has been extremely difficult to diagnose. What could cause this?

EDIT: never mind, this behavior has nothing to do with the inspection of the element itself, a console.log('hi') in the console produces the same result. The prerequisite for filling the correct form value is just for the user to interact with the page. Unlike the solutions here , I do need the full autofilled value; my login form needs to make a request to the server with the contents of the field before enabling the "submit" button.

Answer 1

I believe this is just expected behavior for Chrome's autofill. See this question.