I'm struggling with what should be a basic concept.
Within my <template>, I have the following code:
<div v-if="this.editable">
<input type="text" ref="nota" :id="notaid" v-model="nombre" v-on:keyup.enter="enviar" v-on:blur="enviar" class="form-control">
</div>
<div v-else>
<p @click="makeEditable">{{ nombre }}</p>
</div>
Initially, when the page loads, editable=false so it displays text. Upon clicking the text, a function sets editable to true, making the input display. This functionality works fine. However, I'm facing an issue - how can I automatically focus on the input once editable changes to true?
I've searched through some resources like here, here, and others that suggest focusing on the element with a simple line of code:
this.$refs.nota.focus()
The code for the makeEditable method is as follows:
methods: {
makeEditable() {
this.editable = true;
this.$refs.nota.focus()
},
...
Unfortunately, I encounter the following error:
app.js:38487 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'focus' of undefined"
I suspect this is because I'm trying to focus on an element that hasn't been created yet, as targeting an input element that is always visible works perfectly fine.
What would be the correct approach in this scenario?