共计 2273 个字符，预计需要花费 6 分钟才能阅读完成。
问题形容
在咱们做我的项目中，会遇到这样的问题，就是在某个页面有一个 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，大家独特加油
正文完