在不使用vue框架的情况下,清空表单很容易,直接操作dom即可,但是使用了vue,将表单中的数据与vue实例中的data绑定,操作表单后清空表单似乎没那么好理解了。这里给大家提供了两个解决方案。
第一种,将所有的表单数据放到 form对象中,提交表单后遍历对象,将对象属性置空,代码如下:
<template>
<div id="app">
<form action="" @submit.prevent='updata'>
<input type="text" v-model="form.username"><br>
<input type="text" v-model="form.pass"><br>
<input type="text" v-model="form.tel"><br>
<input type="submit" value="提交">
</form>
</div>
</template>
<script>
export default {
data() {
return {
form: {}
};
},
name: "app",
created() {},
methods: {
updata() {
alert(this.form.username);
for (var i in this.form) {
this.form[i] = "";
}
}
}
};
</script>
<style>
</style>
上面的是一般情况,若是初始值比较复杂的话,采用第二种方法,在created生命周期中,保存自定义的值,需要对保存的值进行序列化,操作完表单后,给form重新赋值。代码如下:
<template>
<div id="app">
<form action="" @submit.prevent='updata'>
<input type="text" v-model="form.username"><br>
<input type="text" v-model="form.pass"><br>
<input type="text" v-model="form.tel"><br>
<input type="submit" value="提交">
</form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: "匿名用户",
pass: "123456",
tel: "123123123321"
}
};
},
name: "app",
created() {
this.defaultform = JSON.parse(JSON.stringify(this.form));
// this.defaultform = Object.assign({},this.form);
},
destroyed() {
this.defaultform = null;
},
methods: {
updata() {
console.log(this.form);
this.form = Object.assign({}, this.defaultform);
}
}
};
</script>
<style>
</style>
第二种别忘了在组件卸载时将defaultform垃圾回收。