Inserting a new element in the list

Let’s see how to store a new element in the list, following a click on the Add Element button.

The text associated with this element must be transmitted to the server, which will be of the form Element X. We will see later how to modify this text after clicking on the Modify button.

The add() method defined in the <GlobalApp> component is used to insert a new element into the displayed list. It will be necessary to add instructions that use the Axios library in order to also insert this new element in the MongoDB elements collection.

Before starting to use Axios, it is useful to slightly modify the JavaScript program written with Vue.js. To do this, we will use a new attribute when creating the <Element> component, replacing the text and index attributes with the element attribute.

Replacing the text and index attributes with the element attribute

When creating an element, we currently use the element’s text...