主页 / 问题 / 1347364
Accepted
EvilBDSM
Asked:2022-04-08 22:39:52 +0000 UTC2022-04-08 22:39:52 +0000 UTC

添加新元素后如何清除输入字段？

  • 772

我和学生有一个数组。

有一个添加学生的实现。

问题：点击按钮后如何清除字段？必须清除这些字段，以便当您尝试在那里输入新值时，旧值不会在那里替换。

我已经尝试了一切，没有任何效果。没有<form>-> <button type = "reset"> ，没有选择器...

可以做些什么来解决这个问题？

索引.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 });
        }
    }
})
html

3 个回答

  1. Best Answer
    1. 在 v-model 模板中，您需要绑定到 stud 字段，而不是学生。我想学生数组在模板中是可迭代的，而 stud 是表单本身的字段
    2. 创建一个返回默认“空/新”学生对象的方法，提交后，用这个对象替换 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';
  }
}
    • 1 
  2. addStudent() {
   const id = this.stud.length + 1;
   this.stud.push({ id, ...this.students });
   this.students = [];
}
    • 0

  3. 从输入中获取一个数组。使用 for 或 forEach 对其进行迭代。然后添加 value = ''; 像这样 input[i].value = '';

    • 0

相关问题