为什么当我单击输入 (Vue) 时焦点不起作用？

Question

我有一个问题，当我想专注于一些输入时，我必须点击两次，而且我不知道如何在输入结束时设置光标。我试过用$refs，但更深层次的东西正在发生。有什么建议吗？

HTML代码

<div class="input-container">
<h3 class="field-value" v-show="!showField('name')" @click="focusField('name')">{{ user.name }}</h3>
<input v-model="user.name" v-show="showField('name')" id="user-name" type="text" ref="test" class="field-value form-control" @focus="focusField('name')" @blur="blurField">
</div>
<div class="input-container">
<h3 class="field-value" v-show="!showField('email')" @click="focusField('email')">{{ user.email }}</h3>
<textarea name="testing" id="editableTextArea" cols="30" rows="10" v-model="user.email" v-show="showField('email')" type="email" class="field-value form-control" @focus="focusField('email')" @blur="blurField"></textarea>
</div>

VUE代码

data() {
return {
user: {
name: pa.data.text1,
email: pa.data.text2
},
editField: '',
}
},
methods: {
hi(){
this.$refs.test.$el.focus();
console.log(1);
},
focusField(name) {
this.editField = name;
},
blurField() {
this.editField = '';
},
showField(name) {
return (this.user[name] == '' || this.editField == name)
},
}

Answer 1

您可以使用setTimeout来应用焦点，不建议使用，但您可以使用它，因为这里有一些特定的用例。

这是所需的更改

focusField(name) {
this.editField = name;
setTimeout(()=>{
this.$refs[name].focus(); // access the ref and make it focus after a delay make sure element appear in the DOM
},200);

},

您还需要更改输入中的一些方法绑定，如blur，当您移动到任何其他元素时，blur将自动调用。

同时声明inputs元素的所有ref。

这是堆叠式