대화 상자를 열 때 대화 상자 내부의 포커스 텍스트 필드 설정

대화 상자를 열 때 대화 상자 내부의 포커스 텍스트 필드 설정

사용자 지정 텍스트 필드가 있으며 대화 상자를 열 때 해당 필드에 초점을 맞춰야 합니다.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()
    }
  }
});

대화 상자 버튼을 클릭하여 열 때 텍스트 필드가 포커스가 맞지 않습니다.여기 내 모든 코드펜이 보여

대화 상자가 열렸을 때 포커스를 올바르게 맞추려면 어떻게 해야 합니까?

코드의 문제는 이 코드에 접속하려고 한다는 것입니다.$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)
}

대화 상자를 전환하는 속성의 워처 안에 포커스 논리를 설정합니다.

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

언급URL : https://stackoverflow.com/questions/59407003/set-focus-text-field-inside-dialog-when-dialog-opened