Как очистить поля ввода после добавления нового элемента?

Question

У меня есть массив со студентами.

Есть реализация добавления студентов.

Вопрос: как после нажатия кнопки очистить поля? Поля нужно очистить так, чтобы при попытке ввести туда новые значения туда не подставлялись старые значения.

Все перепробовал, ничего не работает. Ни <form> -> <button type = "reset"> , ни селекторы...

Что можно сделать для решения этой задачи?

index.html

....

    <!-- добавление нового студента в массив -->
    <br>
    <input v-model="students.name" placeholder="ФИО">
    <select v-model="students.group">
            <option value="1">1</option>
            <option value="2">2</option>
    </select>
    <input v-model="students.year" placeholder="Год рождения">
    <input type="checkbox" v-model="students.done">
    <label>Сдал</label>
    <input v-model.number="students.mark" type="number" placeholder="Оценка">
    <button type="reset" @click="addStudent()">Добавить студента в массив</button>
</div>
<!-- /добавление нового студента в массив -->

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="/index.js"></script>

index.js

let students = [
    {
        id: '1',
        name: "Test",
        group: "1",
        year: "1985",
        done: true,
        mark: 4,
    },
]

var app = new Vue ({
    el: '#app',
    data: {
        students: [],
        search: '',
        stud: students.slice(),
    },
    methods: {
        deleteStudent(studId) {
            this.stud = this.stud.filter(elem => {
                return elem.id != studId;
            });
        },
        addStudent() {
            const id = this.stud.length + 1;
            this.stud.push({ id, ...this.students });
        }
    }
})

Answer 1

addStudent() {
   const id = this.stud.length + 1;
   this.stud.push({ id, ...this.students });
   this.students = [];
}

Answer 2

Возьмите массив из input. Переберите его с помощью for или forEach. Затем к полученному свойству припишите value = ''; Примерно так input[i].value = '';

Answer 3

в шаблоне v-model нужно биндить к полю stud, а не к students. Я полагаю, массив students итерируется в шаблоне, а stud - поле для самой формы
создайте метод, который возвращает дефолтный объект "пустого/нового" студента и после сабмита заменяете stud на этот объект

addStudent() {
  const id = this.students.length + 1;
  // класс Student должен будет принимать id
  this.students.push(new Student({ id: id }));
  this.stud = new Student(); 
}

Класс студента

class Student {
  constructor(obj = {}) {
    this.id = obj.id || 0;
    this.name = obj.name || 'Name default';
    this.group= obj.group || 'Group default';
    this.year= obj.year || 'year default';
    this.done= obj.done || 'done default';
    this.mark= obj.mark || 'mark default';
  }
}

БЛОГ НА HUSL

Как очистить поля ввода после добавления нового элемента?

Ответы (3 шт):