问题形容
在咱们做我的项目中，会遇到这样的问题，就是在某个页面有一个form表单供用户输出填写，需要是：如果用户在表单中输出了内容，然而没有点击保留，而忽然想来到这个页面了，就要提醒询问是否保留，这个时候就要判断表单内容是否发生变化，并做相应的逻辑管制。本篇文章分两种状况去简述如何判断form表单是否发生变化的解决思路
状况一 判断新增页面的表单是否发生变化
先说新增页面，新增页面比拟非凡，因为外面的初始值都为空，所以咱们只须要去判断，变动前和变动后的form表单的值是否不为空即可
html局部
<template> <div id="app"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model.trim="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model.trim="form.age"></el-input> </el-form-item> <el-form-item label="籍贯"> <el-input v-model.trim="form.home"></el-input> </el-form-item> </el-form> <el-button @click="leave">来到</el-button> </div></template>js局部
<script>export default { name: "app", data() { return { /* 第一步，form对象和html中的el-form-item一一对应，这个简略惯例操作 而后因为是新增页面，所以初始值咱们间接定义为空即可，个别用字符串空 或者是null空去示意，前面判断是否发生变化也是判断是否不为空*/ form:{ name:null, age:"", home:null } }; }, methods: { // 假如用户点击了按钮筹备来到当前页了，而后去做判断 leave(){ /* 第二步，定义一个初始标识为0，遍历form对象，此时的对象就三种状况，null或空字符串 或者有输出内容值。如果遍历获取的属性值为null或空字符串就让num不变，如果不为null 不为空字符串就阐明用户输出内容了，就把标识num加上一。最终去判断这个num的值 如果num的值最终还是0，阐明用户始终没有输出内容，就容许用户间接来到。如果num的 值最终大于0，就阐明用户输出内容了，而后就询问用户是否要保留刚刚输出的内容。 */ let num = 0 for (const key in this.form) { if(this.form[key] == ""){ num = num + 0 }else if(this.form[key] == null){ num = num + 0 }else{ num = num + 1 } } // 第三步，依据标识num的最终值，去做流程逻辑管制判断 if(num > 0){ console.log("询问是否保留以后数据") }else{ console.log("容许路由跳转"); } } },};</script>状况二 判断编辑页面的表单是否发生变化
html局部
编辑页面的html局部同新增页的html局部一样
js局部
<script>export default { name: "app", data() { return { form:{} }; }, mounted() { /* 第一步，因为是在编辑页，所以进入这个页面的时候，咱们须要发申请，获取对应的初始数据 这里的初始数据，个别会是一部分有值，另外一部分为空。思路是把初始值存两份，一份 存到data中去，用于页面显示，另外一份存到本地。前面就判断form中的内容和本地存的 初始值是否统一。统一就阐明没有变动，不统一就阐明变动了，阐明用户输出内容了，就 询问用户是否保留 */ let apiForm = { // 假如apiForm是咱们发申请获取的数据 name:"孙悟空", age:500, home:"" /* 小细节，如果有空值，让后端传空字符串，这里home不能用null，因为若用户输出空格或 输出内容当前又删除掉，这里的null就会变成空字符串了，大家能够本人试试，小细节 */ } this.form = apiForm sessionStorage.setItem("initForm",JSON.stringify(apiForm)) // 因为是对象，所以要转成字符串存储 }, methods: { leave(){ /* 第二步，判断this.form和initForm是否相等，不相等就提醒用户是否保留 这里有一个细节，因为this.form和initForm都是对象，对象和对象是永远不相等的 （对象是援用数据类型，指向的堆地址是不相等的）所以要把对象转成字符串，看是否相等 initForm曾经转成字符串了，所以转一下this.form去判断就行了 */ if(JSON.stringify(this.form) == sessionStorage.getItem("initForm")){ console.log("表单没变动，容许来到"); }else{ console.log("表单变动，询问是否保留"); } } },};</script>总结
如果想要全面的进行管制，能够联合vue路由的拦挡钩子，beforeRouteLeave。具体情况具体分析，本篇文章只是简述了两种思路，具体怎么做还要看业务场景和需要。2021，大家独特加油