Estoy creando una aplicación en la que puedes agregar cadenas a una lista y editarlas. Cuando hago clic en editar, el <h3> se convierte en un campo de entrada gracias a algunos v-if/v-show, me gustaría agregar la funcionalidad de que cuando aparece la entrada, la entrada también se enfoca inmediatamente.
Aquí está mi código actual:
<div class="card" v-for="(item, index) in list" :key="index"> <!-- not editing --> <div v-if="editing != index + 1"> <button class="edit-btn" @click="setEditing(item, index)"> edit </button> <h3 class="title">{{ index + 1 + ". " + item }}</h3> <button class="delete-btn" @click="deleteEntry(index)"> bin </button> </div> <!-- editing --> <div v-show="editing == index + 1"> <button class="edit-btn" style="background-color:white;color:grey;border-color:grey;font-weight:bold" @click="cancelEdit" > x </button> <input ref="editInput" autocomplete="off" @change="console.log(entry)" class="edit-input" id="edit-input" @keyup.enter="saveChanges(index)" v-model="entry" /> <button class="delete-btn" style="background-color:white;border-color:green;color:green" @click="saveChanges(index)" > mark </button> </div> </div>función
setEditing(entry, index) { this.editing = index + 1; this.entry = entry; var el = this.$refs.editInput[index]; console.log(el); el.focus(); // document.getElementById("edit-input").focus(); },Variables
data() { return { editing: 0, newEntry: "", list: [], error: "", entry: "", }; },v-show tarda un tiempo en actualizar el DOM, por lo que el focus en la entrada no funciona correctamente. Deberías poner el.focus() dentro nextTick .
Uso de nextTick según los documentos de vue:
Aplazar la devolución de llamada para que se ejecute después del próximo ciclo de actualización de DOM. Úselo inmediatamente después de haber cambiado algunos datos para esperar la actualización de DOM.
setEditing(entry, index) { this.editing = index + 1; this.entry = entry; var el = this.$refs.editInput[index]; console.log(el); this.$nextTick(() => { el.focus(); }) },Prueba esto por favor:
this.$nextTick(() => this.$refs.editInput[index].focus())