This works:

This doesn’t work

delete last – button is responsible for deleting lines from the “Products Table”.

I can’t understand what the problem here is. Does an event always need to be placed after the modifying elements? This doesn’t really make sense to me.

Below the code:

<template>
...
<button @click="removeItem(itemID)" type="button" class="btn btn-danger">delete last</button>
<table>...<table>
...
<tamplate>

<script lang="ts">
...
 methods: {
    removeItem(elementID: number): void {
      let itemIndex = this.products.findIndex((el) => {
        return el.id === elementID
      })
      if (itemIndex !== -1) this.products.splice(itemIndex, 1)
      else alert("no such item")
    }
  }
...
</script>

This works perfectly when

• delete last – button is placed above the “Products Table”

whereas it
doesn’t work when

• delete last – button is placed below the “Products Table”