解决vue表单为空也能提交的问题解决vue表单为空也能提交的问

vue表单为空也能提交今天在用Vue写表单验证的时候，习惯性把v-model绑定的值设置为null，然后再测试的时候，发现如果填写了表单后，又删除输入的内容，竟然能提交上去，百思不得其解。
最后通过vue devtools这个工具找到了问题所在。

大概是这样写的

data () {return {ipt: null,}}if(this.ipt !== null) {axios.post()...}

研究了老半天，最后通过vue工具发现最初设置ipt的值为null，当表单输入内容，又删除之后，虽然内容不见了，但是ipt的值变为了''，这样就不能通过简单的!== nulll来判断了。

if(this.ipt !== null &&this.ipt) {axios.post()...}

vue的表单提交方式每次做项目都会用，也会踩一些坑，这里统一整理一下，当个模板用

vue表单收集和提交

Document - 锐客网
用户名密码头像姓名性别男女年龄爱好学习打游戏吃饭所属校区其他信息阅读并接受《用户协议》

上述代码有三点需要说明

在
标签中出现了:model="form"，这是为了将form中的各项数据动态收集到vue的data中的form对象中，方便统一管理
form标签上的@submit.prevent为提交时阻止表单的默认行为（跳转）
v-model.trim是将输入的数据去除前后的空格；v-model.number是转换为Number类型；v-model.lazy是失去焦点后再把数据渲染到页面上