在vue js中打开对话框时自动聚焦输入答案

【问题标题】：Auto focus input when dialog open in vue js在vue js中打开对话框时自动聚焦输入
【发布时间】：2020-07-06 16:42:49
【问题描述】：

我有一个对话框，其中包含使用 v-menu 的输入文本，当点击按钮时它会出现，如何在对话框打开时聚焦输入文本。我尝试 $ref bat 它不起作用

newFolderClick(){
  this.$refs["input_new_folder"].focus();
  //it still undefined
}

<input @keyup.enter="confirmCreateFolder" v-debounce:100ms="checkValidate" v-model="newFolderName" class="storage-dialog-input" ref="input_new_folder"/>

【问题讨论】：

对话框出现时需要在相同的值基础上调用newFolderClick。

标签： javascript html vue.js

【解决方案1】：

我认为 autofocus 属性应该可以解决问题。

<input v-model="newFolderName" autofocus />

【讨论】：

它不起作用并抛出这个“自动对焦处理被阻止，因为文档已经有一个焦点元素”

【解决方案2】：

在这种情况下，你需要使用$nextTick

像这样：

newFolderClick(){
  this.$refs["input_new_folder"].focus();
}

created () {
    this.$nextTick(() => this.newFolderClick());
}

【讨论】：