通过v-show显示后，将注意力集中在输入上

问题描述

我有一个简单的表单，在使用v-show加载页面时会隐藏。我希望在显示之后关注输入。我有一个按钮来调用一个显示表单的方法，并使用以下代码将焦点设置为输入：

I have a simple form that is hidden when the page is loaded, using v-show. I want to focus the input after showing it. I have a button to call a a method that shows the form and sets the focus to the input using this code:

    this.newQuestion = true; //(Form whit v-show:newQuestion)
    this.$refs.questionInput.focus();

问题是表格显示正确，但输入没有聚焦我第一次按下按钮，如果我在表单在其工作的页面中第二次按下它。我想知道是否有办法做到这一点，谢谢。

The problem is that the form is showed correctly, but the input isn't focused the first time I press the button, if I press it for a second time when the form is in the page it works. I want to know if there is a way to do this, thanks.

推荐答案

我之前遇到过类似的问题，我被迫更新（在您的情况下，焦点），使用Vue的 nextTick 方法，该方法将立即使用已经更改了一些数据以等待DOM更新。：

I encountered a similar problem before, and I forced the update (in your case, the focus) by using Vue's nextTick method, which is to use immediately after you’ve changed some data to wait for the DOM update.:

this.$nextTick(() => {
    this.$refs.questionInput.focus();
})

这篇关于通过v-show显示后，将注意力集中在输入上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！