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>

当点击'Full name'字段时，我需要将焦点设置在'First Name'输入框上，该输入框被禁用并且仅在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 中调用焦点。

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

vue js : How to set focus on disabled input field

focus

vue.js