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

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

问题是表单显示正确,但第一次按下按钮时输入没有聚焦,如果在表单处于工作页面时再次按下该按钮.我想知道有没有办法,谢谢.

推荐答案

我以前也遇到过类似的问题,我使用Vue的nextTick方法强制更新(在您的例子中是focus),这是在更改一些数据以等待DOM更新后立即使用的方法:

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

Vue.js相关问答推荐

BootstrapVue Popover:奇怪的react 行为

如何默认打开一个v-list-group?

为什么在 Vue2 中调用 this.$emit() 后 props 没有立即更新?

从组件中检索 Shopware CMS 编辑器中的自定义实体数据

如何在 Vuetify 2 中的轮播项目上放置 href 属性?

Vue Js Composition Api 未定义(读取名称)

vite - 具有相对assets资源 路径的子页面

单击 v-data-table 中行中的任意位置并移动到另一个页面

Defer推迟执行,直到外部脚本加载到 Vue.js

如何将参数传递给使用 ...mapActions(...) 映射的函数?

Vue&TypeScript:在项目目录外的 TypeScript 组件中实现导入时如何避免错误 TS2345?

如何打破 vue.js 中的 v-for 循环?

如何在 Vue.js 中获取组件元素的 offsetHeight?

如何在 Vue 类组件中定义过滤器?

将 VueJS 数据属性重置为初始值

Vue Cli 3 不允许我在 Webpack 中处理 SVG

错误:Node Sass 尚不支持您当前的环境:Linux 64-bit with Unsupported runtime (88)

Vue v-model 不响应 BS4 单选按钮组

返回 VueJS 方法的Native Code消息

Vue-i18n - 无法读取未定义的属性配置