We need to consider that multiple components on the same page will not affect el-input
1. Custom instructions
<template>
<div>
<A></A> <div v-if="!isEditing" @click="toggleEditMode">{
{
form.remark50 }}</div>
<el-input v-model="form.remark50" ref="input" v-if="isEditing" @blur="toggleEditMode" v-focus></el-input>
</div>
</template>
<script>
import A from 'path/to/A.vue';
export default {
components: {
A },
data() {
return {
form: {
remark50: "Some text"
},
isEditing: false
};
},
directives: {
focus: {
inserted(el) {
el.querySelector('.el-input__inner').focus();
}
}
},
methods: {
toggleEditMode() {
this.isEditing = !this.isEditing;
}
}
};
</script>
2. Add a unique identifier
<template>
<div>
<A></A> <div class="editable" v-if="!isEditing" @click="toggleEditMode">{
{
form.remark50 }}</div>
<el-input v-model="form.remark50" ref="input" v-if="isEditing" @blur="toggleEditMode"></el-input>
</div>
</template>
<script>
import A from 'path/to/A.vue';
export default {
components: {
A },
data() {
return {
form: {
remark50: "Some text"
},
isEditing: false
};
},
methods: {
toggleEditMode() {
this.isEditing = !this.isEditing;
if (this.isEditing) {
this.$nextTick(() => {
const inputEl = this.$el.querySelector('.editable .el-input__inner');
if (inputEl) {
inputEl.focus();
}
});
}
}
}
};
</script>