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

问题描述

如何在使用 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()
  })
}

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

解决方法

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

<input ref="filter" />

然后在安装组件后，在下一个勾号时通过引用将其聚焦：

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

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

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

  return {
    filter
  };
}

,

您还可以使用 autofocus 原生的 HTML 属性：

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