Как установить начальный фокус на поле ввода при загрузке страницы (с VueJS 3 с использованием Composition API)

Как я могу установить фокус на поле ввода HTML при загрузке страницы при использовании Composition API VueJS 3? У меня есть следующий HTML-код:

<div>
  <input type = "text" id = "filter" v-model = "filter">
</div>

И пробовали это в функции setup (), но это не устанавливает фокус:

setup() {
  onMounted(() => {
    const filter_fld = document.getElementById('filter')
    filter_fld.focus()
  })
}

Я также пробовал использовать приведенный ниже
HTML:

<div>
  <input type = "text" ref = "filter_fld" v-model = "filter">
</div>

И в функции setup ():

setup() {
  const filter_fld = ref(null)

  onMounted(() => {
    filter_fld.value?.focus()
  })
}

Но, к сожалению, безуспешно. Какие-либо предложения?

input vuejs3 setfocus vue-composition-api

30.03.2021 13:02

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Введите в свой шаблон ref, например:

<input ref = "filter" />

Затем после установки компонента сфокусируйте его по ссылке на следующем тике:

import { ref, onMounted, nextTick } from 'vue';

setup() {
  const filter = ref(null);

  onMounted(() => {
    nextTick(() => {
      filter.value.focus();
    });
  });

  return {
    filter
  };
}

Герой !! Большое спасибо. Не знал функцию nextTick ().

— 30.03.2021 14:26

30.03.2021 13:43