vue js: Как установить фокус на отключенном поле ввода

Question

<b-row v-if="detailsEditable">
                <b-col cols="6">
                  <b-form-group label="First name">
                    <b-form-input
                      ref="firstName"
                      v-model="userDetails.first_name"
                      :disabled="!detailsEditable"

                    ></b-form-input>
                  </b-form-group>
                </b-col>
                <b-col cols="6" class="pl-0">
                  <b-form-group label="Last name">
                    <b-form-input
                      v-model="userDetails.last_name"
                      :disabled="!detailsEditable"
                    ></b-form-input>
                  </b-form-group>
                </b-col>
              </b-row>
              <b-row v-else>
                <b-col cols="12">
                  <b-form-group label="Full name">
                    <div @click="enableField('name')">
                      <b-form-input
                        ref="name"
                        :value="
                          userDetails.first_name + ' ' + userDetails.last_name
                        "
                        :disabled="!detailsEditable"                            
                      ></b-form-input>
                    </div>
                  </b-form-group>
                </b-col>
              </b-row>
<script>
export default {
  data() {
detailsEditable: false,
}
}
</script>

При нажатии на поле «Полное имя» мне нужно установить фокус на поле ввода «Имя», которое отключено и отображается только в том случае, если detailsEditable =true

Я установил фокус в методе enableField. Но это не работает, используя $ refs.

enableField(value) {
    const vm = this           
    vm.detailsEditable = true
    vm.$refs.firstName.focus() 
}

Answer 1

Попробуйте:

enableField (value) {
  const vm = this
  vm.detailsEditable = true
  vm.$nextTick(() => {
    vm.$refs.firstName.focus()
  })
}

Я думаю, что проблема заключается в времени рендеринга Vue. Vue буферизует изменения и, по сути, выполняет асинхронную визуализацию. По этой причине вы, вероятно, захотите вызвать фокус в nextTick.