Modifying an element in the list
Modifying a list element is done in several steps:
- Following a click on the Modify button, we transform the text of the list element (currently a
<span>element) into an HTML<input>element initialized with the text of the element. - Then we manage the exit of the input field, by retrieving the value entered in the field, then by replacing the input field with a
<span>element with the new content. - Finally, we improve the input by allowing the input control to automatically have the focus after clicking on the Modify button.
Let’s see these different steps in depth.
Transforming the <span> element into an <input> element
The first step is to transform the <span> element into an <input> element, which will allow the text of the element to be modified. To do this, we will add a new reactive variable (named "input") in the <Element> component. It indicates whether...
