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

【问题标题】：How to clear input fields after adding a new element?添加新元素后如何清除输入字段？
【发布时间】：2021-11-08 15:20:12
【问题描述】：

我和学生们有一个数组。

我有学生加法的实现。

问题：按字段后如何清理？必须清理字段，以便在您尝试输入新值时不会将其设置为旧值。

尝试了一切，没有任何效果。 <form> -> <button type = "reset"> 或选择器都不是 ...

有什么办法可以解决这个问题？

index.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>

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

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

我不知道 vue，但您始终可以选择所有输入并将其值设置为 '' ： document.querySelectorAll('input').forEach(input => input.value='')

在最好的情况下将它应用到容器上，这样：

document.querySelector('.formClassName').querySelectorAll('input').forEach(input => input.value='')

【讨论】：

【解决方案2】：

只需使用以下内容：

deleteStudent(studId) {
  this.stud.splice(students.id, 1)
}

您可以splice 基于它的 id 的东西，逗号后面的 1 是它从您的 id 中删除 1 个螺柱数据。

【讨论】：

我仍然在这里回答了一些类似的问题：stackoverflow.com/questions/69707589/… - 你也可以检查一下，这是一个更详细的答案！
我认为您的意思是在“deleteStudent”之前编写函数。
是的，当然！抱歉 - 感谢更新！

【解决方案3】：

当您想在表单上使用 v-model 并让用户输入一些数据时，您应该将初始 object 传递给您的输入。当用户提交表单时，您将 push 该数据到您的数组，然后重置您的初始对象。

所以这个实现会帮助你：

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

【讨论】：