vue js：如何将焦点设置在禁用的输入字段上答案

【问题标题】：vue js : How to set focus on disabled input fieldvue js：如何将焦点设置在禁用的输入字段上
【发布时间】：2020-06-01 00:09:11
【问题描述】：

<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() 
}

【问题讨论】：

我认为没有理由将焦点设置在禁用字段上。

标签： vue.js focus

【解决方案1】：

试试这个：

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

我认为问题在于 Vue 的渲染时间。 Vue 缓冲变化并且本质上是异步渲染的。因此，您可能希望在 nextTick 中调用 focus。

【讨论】：