设置焦点在Vue中的输入字段答案

【问题标题】：set focus on input field in Vue设置焦点在Vue中的输入字段
【发布时间】：2021-12-03 17:25:56
【问题描述】：

我有一个表单，我想将焦点设置在输入字段上。这是表单的html：

<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 字段也有 name=what 属性和 id 属性，如何在 vue 中捕获这个 input 元素

【问题讨论】：

stackoverflow.com/q/64774113/8172857

标签： javascript vue.js

【解决方案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" autofocus>

【讨论】：

我不能补充，我必须在特定事件后将焦点跳转到输入字段
那你可以试试document.getElementById("searchArticlesWhat").focus();
看看这段代码：formsWhat.forEach(form => { if (form.getAttribute('data-search-form') === currentSearchType) { form.reset() ; /-----这里我想将焦点设置到输入字段-----/ } });重置表单后，我想将焦点设置在表单内的输入字段
form.reset(); 之后可以通过id 获取 Element 并设置焦点。使用document.getElementById("searchArticlesWhat").focus();
我怎样才能到达现场？整个表单都在“表单”对象内