Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly

vue determines el form elementui


Problem description

In our project , There will be such a problem , It's a page with a form The form is for users to input and fill in , Demand is : If the user enters content into the form , But I didn't click save , And suddenly want to leave this page , Ask if you want to save , At this time, it is necessary to determine whether the content of the form has changed , And do the corresponding logic control . This article is divided into two situations to describe how to judge form The solution of whether the form has changed

Situation 1 Judge whether the form of the new page has changed

Let's start with the new page , The new page is special , Because the initial values are all empty , So we just need to judge , Before and after the change form Whether the value of the form is not empty is OK

html part

<template>
<div id="app">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label=" full name ">
<el-input v-model.trim="form.name"></el-input>
</el-form-item>
<el-form-item label=" Age ">
<el-input v-model.trim="form.age"></el-input>
</el-form-item>
<el-form-item label=" Native place ">
<el-input v-model.trim="form.home"></el-input>
</el-form-item>
</el-form>
<el-button @click="leave"> Leave </el-button>
</div>
</template>

js part

<script>
export default {
name: "app",
data() {
return {
/* First step ,form Objects and html Medium el-form-item One-to-one correspondence , This simple routine
And then because it's a new page , So we can define the initial value as empty , Generally, empty string is used
Or is it null Empty means , Later, to judge whether there is a change is to judge whether it is not empty */
form:{
name:null,
age:"",
home:null
}
};
},
methods: {
// Suppose the user clicks the button and is ready to leave the current page , Then make a judgment
leave(){
/* The second step , Define an initial identifier as 0, Traverse form object , There are three kinds of objects in this case ,null Or empty string
Or there are input values . If the property value obtained by traversal is null Or an empty string num unchanged , If not for null
If the string is not empty, it means that the user has entered the content , Just put the logo num Add one . Finally to judge this num Value
If num In the end, it's still 0, It means that the user has never entered anything , Allow users to leave directly . If num Of
The final value is greater than 0, It means that the user input content , Then ask the user if they want to keep what they just entered .
*/
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
}
}
// The third step , According to the logo num Final value , To do process logic control judgment
if(num > 0){
console.log(" Ask if you want to save the current data ")
}else{
console.log(" Allow route hops ");
}
}
},
};
</script>

Situation two Determine whether the form on the edit page has changed

html part

Edit the html Some of them are the same as those on the new page html Part of the same

js part

<script>
export default {
name: "app",
data() {
return {
form:{}
};
},
mounted() {
/* First step , Because it's editing the page , So when you go to this page , We need to send a request , Get the corresponding initial data
The initial data here , Generally, some of them are valuable , The other part is empty . The idea is to save two copies of the initial value , One copy
Deposit in data In the middle , For page display , The other one is kept locally . I'll judge later form Content in and local storage
Whether the initial values are consistent . Consistency means no change , Inconsistency means change , That means the user has entered , Just
Ask the user if they want to save
*/
let apiForm = { // hypothesis apiForm It's the data we requested
name:" The Monkey King ",
age:500,
home:"" /* Little details , If there is a null value , Let the back end pass an empty string , here home Out-of-service null, Because if the user enters a space or
Input content and then delete it , there null It becomes an empty string , You can try it yourself , Little details */
}
this.form = apiForm
sessionStorage.setItem("initForm",JSON.stringify(apiForm)) // Because it's the object , So to convert to string storage
},
methods: {
leave(){
/* The second step , Judge this.form and initForm Whether it is equal or not , If not, the user will be prompted whether to save
Here's a detail , because this.form and initForm Are all objects , Objects and objects are never equal
( Objects are reference data types , The heap addresses pointed to are not equal ) So we need to convert the object to a string , See if it's equal
initForm It's converted to a string , So turn around this.form Just judge
*/
if(JSON.stringify(this.form) == sessionStorage.getItem("initForm")){
console.log(" The form hasn't changed , Allow to leave ");
}else{
console.log(" Form changes , Ask if you want to save ");
}
}
},
};
</script>

summary

If you want comprehensive control , Can combine vue Interception hook of route ,beforeRouteLeave. Specific case specific analysis , This article only outlines two ideas , How to do it depends on the business scenarios and requirements .2021, Let's cheer together

版权声明
本文为[Water is redundant and water is abundant]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222225859798v.html

  1. An inexperienced front-end engineer, what are the common problems when writing CSS?
  2. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  3. Springboot starts http2
  4. Enabling http2.0 in spring boot
  5. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  6. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  7. vue.js Error in win10 NPM install
  8. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  9. Springboot starts http2
  10. Vue event bus
  11. JQuery easy UI tutorial: custom data grid Pagination
  12. Using okhttp and okhttpgo to obtain onenet cloud platform data
  13. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  14. HTTP 1. X learning notes: an authoritative guide to Web Performance
  15. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  18. Event bubble and capture in JavaScript
  19. The root element is missing solution
  20. Event bubble and capture in JavaScript
  21. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  22. Javascript数据类型
  23. HTTP interface debugging tool! 48000 star HTTP command line client!
  24. Parameter encryption of front end URL link band
  25. HTTP interface debugging tool! 48000 star HTTP command line client!
  26. Three front end frameworks: data binding and data flow
  27. Reading Axios source code (1) -- exploring the realization of basic ability
  28. Event bubble and capture in JavaScript
  29. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  30. R & D solution e-Car front end monitoring system
  31. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  32. R & D solution e-Car front end monitoring system
  33. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  34. 解决ajax跨域问题【5种解决方案】
  35. Top ten classic sorting of JavaScript
  36. HTTP 1. X learning notes: an authoritative guide to Web Performance
  37. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  38. My http / 1.1 is so slow!
  39. Why Vue uses asynchronous rendering
  40. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  41. The tapable instance object hook of webpack4. X core tool library
  42. The tapable instance object hook of webpack4. X core tool library
  43. Using libcurl for HTTP communication in C + +
  44. Using libcurl for HTTP communication in C + +
  45. Using CSS variable in Vue
  46. Deeply understand the update of state and props in react
  47. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  48. Baidu share does not support the solution of HTTPS
  49. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  50. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  51. Vue cli creates vue3 project
  52. Nginx reverse proxy for windows authentication using NTLM
  53. Rust tutorial: introduction to rust for JavaScript developers
  54. Deploying personal blog to Tencent cloud with serverless framework
  55. R & D solution e-Car front end monitoring system
  56. JavaScript advanced learning
  57. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  58. Vue: vuex persistent state
  59. React native gets the current network state of the device Netinfo
  60. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%