Mientras estaba haciendo un componente, me encontré con este caso, que estoy bien seguro que será bastante común. El componente ponía un texto que proviene de la base de datos y cuando se hace click sobre el, cambia a un input
para que el usuario pueda cambiar el valor del campo, y después, se escribe a la base de datos, la lógica es la siguiente:
<div v-if="this.editable">
<input type="text" ref="nota" :id="notaid"
v-model="nombre" @onsubmit="enviar"
v-on:keyup.enter="enviar"
v-on:blur="enviar" class="form-control">
</div>
<div v-else>
<p @click="makeEditable">{{ nombre }}</p>
</div>
editable
inicia siendo falso, por lo que se despliega el valor del nombre
, definido en la sección data
. Cuando se hace click, se ejecuta la función makeEditable()
en la sección de methods
, que es algo tan sencillo como:
makeEditable() {
this.editable = true;
},
Lo cual funciona perfectamente, pero lo que sería conveniente es que en el momento que aparece el campo, este tome el foco. Esto se lograría con una modificación sencilla al makeEditable
:
makeEditable() {
this.editable = true;
this.$refs.nota.focus();
},
Esto funciona sin problemas para elementos que ya existen en la página, pero para los recién creados por un v-if
genera un error, por lo que hay que decirle explícitamente a Vue.js que hubo un cambio, esto se hace con la función this.$nextTick()
y el código de arriba queda de la siguiente manera:
makeEditable() {
this.editable = true;
this.$nextTick(() => this.$refs.nota.focus())
},