VUEJS - добавлять элемент при нажатии кнопки

#vue.js #datatable #appendchild

#vue.js #данные #appendchild

Вопрос:

У меня есть таблица в моем проекте Vuejs, похожая на ту, скриншотом которой я поделился выше.

Мой вопрос заключается в следующем: как я могу удалить <tr> элемент из таблицы, когда Delete его кнопка нажата для каждой строки?

С другой стороны, я хочу Add , чтобы кнопка в правом верхнем углу таблицы также была функциональной. Когда я нажимаю на Add кнопку, я хочу <tr> , чтобы в нижней части таблицы был создан еще один элемент. Однако в этом элементе должны быть поля ввода, в которые пользователь может вводить информацию для каждого столбца. После того как пользователь внесет информацию в каждый столбец, эта строка должна быть добавлена в таблицу. Как я могу это сделать?

Ответ №1:

если я прав, вы используете v-for цикл для отображения всех <tr>

затем используйте v-for с подобным индексом v-for="(obj, index) in objects" , чтобы получить индекс

для добавления используйте Array.prototype.push(), чтобы добавить пустую строку, например objects.push({x: null, y: null})

для удаления используйте Array.prototype.splice(), например objects.splice(index, 1)

просто назначьте эти функции соответствующим кнопкам.

1. Я не использовал v-потому что, честно говоря, эта таблица заполнена жестко. В следующих версиях проекта данные будут поступать из серверной части, поэтому мне просто нужно найти способ добавить дочерние элементы <tr> в мое представление с помощью трех полей ввода. Когда пользователь вводит три из них, должен появиться новый элемент <tr> с соответствующими текстами, переключателем и кнопкой удаления.

2. @YasinDemirkaya In the next versions of the project the data will be coming from backend Как данные будут поступать в axios, ajax?

3. Вероятно, Axios.

4. тогда вам, очевидно, придется изменить array of objects , поэтому измените его в соответствии с моим ответом.

Ответ №2:

Вы могли бы попытаться сделать это, используя свойство данных в вашем компоненте, а затем реализовать два метода: deleteRow и addRow .

Это может быть пример кода

 
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]
  }
},

Ваш компонент будет обновлен системой Vue.js реактивности.

Вероятно addRow , метод должен вызываться из модального компонента, в который вы вводите поля ввода для установки newRow .