Как исправить проблему с перекрытием chrome автозаполнения с ярлыками в vuetify?

Question

При попытке создать форму входа с текстовыми полями outlined в Vutify, автозаполнение chrome перекрывается с labels,

<v-text-field
  v-model="email"
  label="e-mail"
  name="email"
  outlined
  prepend-icon="mdi-account"
  type="text"
  required
>
</v-text-field>

you can regeneare здесь пожалуйста заполнить и отправить, затем go обратно.

Answer 1

Вы можете указать свой входной идентификатор и прочитать входное значение, когда компонент смонтирован, и если это что-то еще, кроме пустого, вы можете установить значение данных для того значения, которое содержит вход, таким образом метка будет go вверх, как и следовало ожидать. Основываясь на ваших более поздних комментариях, кажется, что вам также придется подождать обновления DOM, поэтому лучшее, что мы можем сделать, - это выполнить нашу проверку с помощью nextTick:

mounted()  {
  this.$nextTick(() => {
     const emailValue = document.getElementById('email').value;
     this.email = emailValue || '';
  });

}

Answer 2

Функция автозаполнения в браузерах обычно работает, сразу же устанавливая значения соответствующих полей. В этом случае метка полей перемещается в сторону только тогда, когда поле ввода сфокусировано, и остается в стороне, когда она размывается со значением в поле. В случае автозаполнения событие фокуса не запускается, поэтому метка остается на месте.

Чтобы исправить это поведение, вам придется (или попросить кого-нибудь) внести изменения в Vuetify.