Tengo una matriz con los estudiantes.
Tengo la aplicación de la adición de los estudiantes.
Pregunta: ¿cómo limpiar después de presionar el campo? Los campos deben limpiarse para que cuando intente ingresar nuevos valores no se establezcan en los valores anteriores.
Intenté todo, nada funciona. Ni el <form> -> <button type = "reset"> , ni los selectores...
¿Qué se puede hacer para solucionar este problema?
índice.html
...... <!-- add new student --> <br> <input v-model="students.name" placeholder="surname"> <select v-model="students.group"> <option value="1">1</option> <option value="2">2</option> </select> <input v-model="students.year" placeholder="Bitrh year"> <input type="checkbox" v-model="students.done"> <label>done</label> <input v-model.number="students.mark" type="number" placeholder="mark"> <button type="reset" @click="addStudent()">add to array</button> </div> <!-- /add new student --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="/index.js"></script>índice.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 }); } } })No sé vue, pero siempre puede seleccionar todas las entradas y establecer su valor en '': document.querySelectorAll('input').forEach(input => input.value='')
en el mejor de los casos, aplíquelo al contenedor, así que algo así:
document.querySelector('.formClassName').querySelectorAll('input').forEach(input => input.value='')
Solo usa lo siguiente:
deleteStudent(studId) { this.stud.splice(students.id, 1) } Puede splice algo en función de su identificación, el 1 después de la coma es que elimina 1 datos de estudios de su identificación.
Cuando desee utilizar un modelo v en su formulario y permitir que el usuario ingrese algunos datos, debe pasar un objeto inicial a sus entradas. Y cuando el usuario envíe el formulario, push esos datos a su matriz, luego de restablecer su objeto inicial.
Así que esta implementación te ayudará a:
<!-- add new student --> <br> <input v-model="initialState.name" placeholder="surname"> <select v-model="initialState.group"> <option value="1">1</option> <option value="2">2</option> </select> <input v-model="initialState.year" placeholder="Bitrh year"> <input type="checkbox" v-model="initialState.done"> <label>done</label> <input v-model.number="initialState.mark" type="number" placeholder="mark"> <button type="reset" @click="addStudent()">add to array</button> </div> <!-- /add new student --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="/index.js"></script> var app = new Vue ({ el: '#app', data: { students: [], initialState: { id: '', name: '', group: '', year: '', done: true, mark: 0 }, search: '', }, methods: { deleteStudent(studId) { this.students = this.students.filter(elem => { return elem.id != studId; }); }, addStudent() { const id = this.students.length + 1; this.students.push({ id, this.initialState }); this.initialState = JSON.parse(JSON.stringify({ id: '', name: '', group: '', year: '', done: true, mark: 0 })); } } })