Как добавить сотрудника в список (таблицу)?

Чтобы добавить сотрудника в список или таблицу при использовании Vue.js, необходимо выполнить несколько шагов.

1. Создайте компонент для отображения списка сотрудников. В этом компоненте вы будете хранить данные о каждом сотруднике в массиве. Создайте пустой массив employees в опциях компонента:

data() {
  return {
    employees: []
  }
}

2. В шаблоне компонента укажите структуру таблицы и добавьте привязку данных для каждой ячейки:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Должность</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="employee in employees" :key="employee.id">
      <td>{{ employee.name }}</td>
      <td>{{ employee.position }}</td>
    </tr>
  </tbody>
</table>

3. Создайте форму для добавления нового сотрудника. В форме должны быть поля для ввода имени и должности:

<form @submit="addEmployee">
  <input type="text" v-model="newEmployee.name" placeholder="Имя">
  <input type="text" v-model="newEmployee.position" placeholder="Должность">
  <button type="submit">Добавить</button>
</form>

4. В опциях компонента объявите объект newEmployee, который будет использоваться для хранения временных данных нового сотрудника:

data() {
  return {
    employees: [],
    newEmployee: {
      name: '',
      position: ''
    }
  }
}

5. Добавьте метод addEmployee, который будет вызываться при отправке формы. В этом методе добавляйте нового сотрудника в массив employees, основываясь на данных из объекта newEmployee. Затем очистите поля формы:

methods: {
  addEmployee() {
    this.employees.push(this.newEmployee);
    this.newEmployee = {
      name: '',
      position: ''
    };
  }
}

6. Теперь, при каждом добавлении нового сотрудника через форму, данные будут добавляться в список и автоматически отображаться в таблице.

Вот как может выглядеть ваш компонент Vue.js для добавления сотрудника в список:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Имя</th>
          <th>Должность</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="employee in employees" :key="employee.id">
          <td>{{ employee.name }}</td>
          <td>{{ employee.position }}</td>
        </tr>
      </tbody>
    </table>

    <form @submit="addEmployee">
      <input type="text" v-model="newEmployee.name" placeholder="Имя">
      <input type="text" v-model="newEmployee.position" placeholder="Должность">
      <button type="submit">Добавить</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employees: [],
      newEmployee: {
        name: '',
        position: ''
      }
    }
  },
  methods: {
    addEmployee() {
      this.employees.push(this.newEmployee);
      this.newEmployee = {
        name: '',
        position: ''
      };
    }
  }
}
</script>

Таким образом, после добавления сотрудника через форму, его данные будут автоматически добавляться в таблицу. Это позволяет удобно управлять списком сотрудников и отображать их данные в реальном времени.