时间戳

首页 > 解决方案 > 添加新元素后如何清除输入字段？

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

问题描述

我和学生有一个数组。

我已经执行了加法的学生。

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

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

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

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

标签： javascripthtmlvue.js

解决方案

只需使用以下内容：

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

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

推荐阅读