In this tutorial, I will show you how to create simple dynamically editable fields in your Vue application. For the purpose of this tutorial I’m going to use Vue 2 but the same principles apply to Vue 3 as well.
For the sake of simplicity I will first share the code and then add someexplanations below:
Let’s begin with the state. We have 2 values-
editedFieldId. The fields array contains all the field objects through which we iterate and the
editedFieldId represents the id of the currently edited element. Depending on
editedFieldId‘s value we weither display the field as a text or as an input. The function
toggleEdit handles the buttons click and sets the
editedFieldId to the provided id or sets it to null none is provided.
Autofocus the editable field
I assume that it’s easy to understand how
editedFieldId is set in the function. However, you probably wonder why we use
this.$nextTick and refs here. As in most web applications, we want the currently edited field to be automatically focused. Unfortunately, adding the “autofocus” attribute to the input element does not work due to the dynamic appearance of our input fields. The easiest alternative is to access the DOM element and set the focus programatically using the
focus() function. However, we need to wrap this inside
this.$nextTick to ensure that its callback is executed after the other asyncronous operations(in our case the state change and the display of the input field). If we don’t use it, then our input won’t be focused because we are trying to access the element before it has become visible. You can learn more about under this link.
Here is the code in action:
Inline editable fields in action