I'm creating a dynamic form that switches <p> tags to <input> tags when clicked.
You can view an example of this functionality in action on JSFiddle: https://jsfiddle.net/50wL7mdz/314578/
The key part of the code is shown below:
<div id="app">
<div v-for="msg in messages" :key="msg.txt">
<div :class="{editing: msg.edit}">
<p v-on:click="msg.edit = !msg.edit">{{msg.txt}}</p>
<input type="text" v-model="msg.txt">
</div>
</div>
</div>
To improve user experience, I want the newly revealed <input> boxes to automatically be focused so users can start typing right away.
The challenge I face is handling multiple input fields generated dynamically (as seen in the JSFiddle).
Is there a way to set focus to new <input> boxes as they appear?