vue.js - VUEJS - Append <tr> element when button pressed

Question

I have a table in my Vuejs project similar to the one that I shared its screenshot above.

My question is; How can I delete a <tr> element from the table when the Delete button of it is pressed for each row?

On the other hand, I want the Add button at the top right of the table to be functional as well. When I click the Add button, I want another <tr> element to be created at the bottom of the table. However, there should be input fields on this element where the user can enter information for each column. After the user has written the information in each column, that row should be added to the table. How can I do that?

question from:https://stackoverflow.com/questions/65641019/vuejs-append-tr-element-when-button-pressed

Answer 1

if I am correct you are using v-for loop to render all <tr>s

then use the v-for with index like v-for="(obj, index) in objects" to obtain index

to add use Array.prototype.push() to add empty row e.g. objects.push({x: null, y: null})

to remove use Array.prototype.splice() e.g objects.splice(index, 1)

just assign those functionalities to respective buttons.