如何在页面加载时设置输入字段的初始焦点（使用 Composition API 的 VueJS 3）

Question

在使用 VueJS 3 的 Composition API 时，如何在页面加载时将焦点设置在 HTML 输入字段上？我有以下 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()
  })
}

但不幸的是也没有成功。有什么建议吗？

Answer 1

在您的模板中输入带有 ref 的内容，例如：

<input ref="filter" />

然后在安装组件后通过引用将其聚焦在下一个刻度上：

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

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

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

  return {
    filter
  };
}

Answer 2

您还可以使用 autofocus 本机的 HTML 属性：

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

如何在页面加载时设置输入字段的初始焦点（使用 Composition API 的 VueJS 3）

How to set initial focus on input field on page load (with VueJS 3 using Composition API)

input

vuejs3

setfocus

vue-composition-api