set focus on input field in Vue

Question

I have a form in which I want to set focus on the input field. here is the html of form:

<form method="GET" name="searchFormArticles" novalidate="" data-search-form="articles" data-search-form-articles="" action="/rechtstipps" id="searchFormArticles" data-read-only="1">
  <input type="text" name="what" id="searchArticlesWhat" placeholder="Thema / Autor / Titel" class="form-control anw-form-control border-left-0 anw-md-rounded-right-none anw-md-border-right-0 shadow-none form-control" value="" autocomplete="off">

<button name="searchArticles" type="submit" class="btn btn-block btn-primary mt-3 mt-md-0 shadow-none text-nowrap py-md-0 px-9 anw-md-rounded-left-none">
  <i class="far fa-search d-none d-md-inline-block text-primary" aria-hidden="true"></i>
  <span>Suchen</span>
</button>

input field has a name=what attribute and a id attribute as well, how can I catch this input element in vue

Answer 1

You can give autofocus property in the first input field.

<input type="text" name="what" id="searchArticlesWhat" placeholder="Thema / Autor / Titel" class="form-control anw-form-control border-left-0 anw-md-rounded-right-none anw-md-border-right-0 shadow-none form-control" value="" autocomplete="off" autofocus>