Vue添加新元素后如何清空绑定v-model的表单输入字段？

根因分析 #

• 你使用v-model做了表单和Vue响应式数据的双向绑定，原生type="reset"按钮只能修改DOM的显示值，不会同步修改Vue实例里的this.students数据，所以旧值会一直残留。
• 另外你当前代码中data里的students初始值设为了空数组[]，但你绑定的是students.name这类对象属性，初始类型不匹配也会导致偶发异常。

修复步骤 #

1. 调整表单绑定对象的初始值 #

先给data里的students设置正确的初始对象结构，对应你表单里的所有字段：

data: {
    // 这里是绑定单个新学生表单的对象，改为带默认值的对象
    students: {
        name: '',
        group: '1',
        year: '',
        done: false,
        mark: null
    },
    search: '',
    stud: students.slice(),
}

2. 新增完成后重置表单数据 #

在addStudent方法的末尾，直接把this.students重置为初始默认值即可，双向绑定会自动同步清空所有表单输入框：

addStudent() {
    const id = this.stud.length + 1;
    this.stud.push({ id, ...this.students });
    // 新增后直接重置表单绑定的对象
    this.students = {
        name: '',
        group: '1',
        year: '',
        done: false,
        mark: null
    }
}

可选优化 #

如果不想重复写默认值，可以把默认值抽成公共方法，避免重复代码：

// 提取默认表单值
function getDefaultStudent() {
    return {
        name: '',
        group: '1',
        year: '',
        done: false,
        mark: null
    }
}

var app = new Vue ({
    el: '#app',
    data: {
        students: getDefaultStudent(),
        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 });
            // 直接调用方法重置
            this.students = getDefaultStudent()
        }
    }
})

另外你可以把按钮的type="reset"去掉，不需要原生重置功能，完全由Vue的数据绑定控制即可。

内容的提问来源于stack exchange，提问作者dbUser11