How do clear the entry field after adding a new element?

[nishika]

I have a bunch of students.

There's an addition of students.

Question: How can the button be cleaned? The fields need to be cleaned so that when attempting to introduce new values, old values are not put in there.

I tried everything, nothing works. No <form> - Category <button type = "reset">No seclators. ♪ ♪

What can be done to meet this challenge?

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 });

}

}

})

[terrea]

1. In the v-model box, you have to bindicate to the field stud, not to students. I believe the student body is irrigated in the template and stud is the field for the form itself.
2. Create a method that returns the default object of the default/new student and replaces stud on this site after the sabmit.

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

Student class

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';
  }
}