当对话框打开时，设置焦点文本字段。

Question

我带有自定义文本字段，当对话框打开时必须聚焦它的功能。我尝试使用vue.js refs来聚焦它：

代码：

<v-app id="app">
  <v-row align="center">
    <v-col class="text-center" cols="12">
      <v-btn color="primary" @click="openDialog()">Open dialog</v-btn>
    </v-col>
  </v-row>
  <v-dialog v-model="dialog">
   <v-card>
    <v-card-title
      class="headline grey lighten-2"
      primary-title
    >
      Dialog
    </v-card-title>
    <v-card-text>
      <v-row>
        <v-col cols="6" class="ml-2">
            <v-text-field
              ref="name"
              placeholder="Enter your name..."
              type="text"
              solo
              flat
              outlined
            ></v-text-field>
            <v-btn 
              color="indigo" 
              dark 
              @click = "setFocusName()"
             >Set focus</v-btn>
        </v-col>
      </v-row>
    </v-card-text>
   </v-card>
  </v-dialog>
</v-app>

Javascript:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      dialog: false
    }
  },
  methods: {    
    setFocusName() {
      this.$refs.name.focus();
    },

    openDialog() {
      this.dialog = !this.dialog  
      this.setFocusName()
    }
  }
});

当我点击打开对话框按钮时，我的文本字段没有聚焦。在这里您可以查看我的完整CodePen代码。

当对话框打开时，我如何正确地将其聚焦？

- Andreas Hunter

Answer 1

您的代码问题在于您在实际渲染之前尝试访问$ref，这里有一个带有工作代码的沙盒： https://codepen.io/Djip/pen/ZEYezzm?editors=1011 为了解决该错误，我添加了一个setTimeout来在对话框打开后0.2秒触发焦点。我一开始尝试使用$nextTick，但这不足以完成任务-您可以尝试调整计时器，使它尽可能低。

setFocusName() {
  this.$refs.name.focus();
},

openDialog() {
  this.dialog = !this.dialog  
  setTimeout(() => {
    this.setFocusName()
  }, 200)
}

- Jesper

---

谢谢，这对我起了作用。但是，为什么你说$ref的 name 是不允许的？在我的代码中已经定义了，或者我不能把$ref的名称定义为“name”？ - Andreas Hunter

实际上，它使用$ref作为name可以正常工作，不知道为什么一开始我没能让它工作 - 我会编辑我的答案。 - Jesper

对我来说，使用超时时间为0是有效的。 - Tobias Feil

Answer 2

我将焦点逻辑设置在监听对话框切换属性的观察器内部。

watch: {
   dialog: function(value) {
      if (value) {
        setTimeout(() => {
          this.$refs.inputrefname.$refs.input.focus();
       });
     }
   }
}

- Randy Peña Jimenez

Answer 3

只需添加autofocus属性，当对话框打开时，它将在对话框内的v-text-field上设置焦点。

<v-text-field
              autofocus
              placeholder="Enter your name..."
              type="text"
              solo
              flat
              outlined
            ></v-text-field>

- XMehdi01

---

最佳解决方案，应该被接受的答案。 - undefined