如何解决如何在页面加载时将初始焦点设置在输入字段上使用 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/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。