Removing an element from the list

Now let’s deal with a click on the Remove button for a list item. Removing an item from the list will be done by removing the element from the reactive variable elements.

Note

Indeed, the variable elements being reactive, any modification of this variable will lead to the re-display of the list.

To do this, a click on the Remove button is managed by associating it with a process during the click. We therefore call the remove() method defined in the <Element> component on each click:

Taking into account the click on the Remove button (element.js file)

const Element = {
  data() {
    return {
    }
  },
  template : `
    <li> 
      <span> {{text}} </span>
      <button @click="remove()"> Remove </button> 
     ...