Delete a bill

When we add a bill we could make an error, so it’s handy to have the option to delete one.

We’ll do that by adding an “X” next to each line in the table.

Let’s add the markup first, in the BillsTable component, where we loop on bills, we add another td element, which contains a button with a click event handler:

<tr v-for="(bill, index) in bills" :key="index" class="p-4">
  <td>{{bill.date | moment("MMM D YYYY")}}</td>
  <td>${{bill.amount}}</td>
  <td>{{bill.category}}</td>
  <td><button @click="removeBill(index)">𝗫</button></td>
</tr>

Notice how we can pass a parameter to the method so we can tell it which bill to delete.

Let’s define the removeBill method in the component script:

removeBill: function(index) {
  this.$emit('removeBill', index)
}

We escalate the event to the parent, the App component so it can handle removing it from the bills list.

First we must tell App to handle the removeBill event, and when this happen, call its removeBill methods:

<BillsTable
  :bills="activeBills"
  v-on:triggerShowAddBill="triggerShowAddBill"
  v-on:removeBill="removeBill"
/>

Here’s the method:

removeBill(index) {
  this.bills = this.bills
    .slice(0, index)
    .concat(this.bills.slice(index + 1, this.bills.length))
}

See, we remove an item from this.bills, which points to the bills property of the component state, concatenating two portions of the array, one until the element we want to remove, and one from the next element till the end.

See the app in the current state on CodeSandbox.

---

Go to the next lesson