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

Question

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

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

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

Answer 1

之前我遇到过类似的问题,并且我focus使用Vue的nextTick方法强制进行更新(在您的情况下),这是在您更改了一些数据以等待DOM更新之后立即使用的方法:

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