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中调用焦点。