[Vuejs]-VUEJS – Append <tr> element when button pressed

by

0👍

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.

0👍

You could attempt this using a data property in your component and then implement two methods: deleteRow and addRow.

This could be an example code


data() {
  return {
    dataTable: [
      {
        id: 1, 
        code: code1, 
        description: description1,
      },
      {
        id: 2, 
        code: code2, 
        description: description3,
      },
      ...
    ]
  }
}
methods: {
  deleteRow(id) {
    this.dataTable = this.dataTable.splice(
      this.dataTable.findIndex(item => item.id === id)
    )
  }
  addRow(newRow) {
    // newRow = {id: 3, code: code3, description: description3}
    this.dataTable = [...this.dataTable, newRow]
  }
},

Your component will be updated by Vue.js reactivity system.

Probably addRow method should be called from a modal component where you put the input fields to set newRow.

Leave a comment