vue watch表单修改提醒

超、凢脫俗 2021-12-15 10:37 352阅读 0赞

在大表单如果内容有修改，在返回其他页面的时候可以提醒 “是否需要保存您所做的更改？” ，在vue中，一个一个字段监听改变太麻烦，那么有没有简单一点的方案呢？答案是有的：我们可以使用 [watch][] 。

`watch` 中有个 `deep` 选项，为了发现对象内部值的变化，可以在选项参数中指定 `deep: true` 。

例如：

export default { 
      data() { 
        return { 
          formChange: false,
          form: { 
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          }
        }
      },
      watch: { 
        'form': { 
          handler () { 
          	// form 对象内部的值变化时，设置 formChange
            this.formChange = true
          },
          deep: true
        }
      },
      methods: { 
        pageBack () { 
          // 页面跳转前检查 formChange
          if (this.formChange) { 
            this.$confirm('是否需要保存您所做的更改？', '提示', { 
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => { 
              this.pageSave()
            }).catch(() => { 
              this.$router.go(-1)
            })
          } else { 
            this.$router.go(-1)
          }
        },
        pageSave () { 
          // 保存表单内容
          ...
          // 表单内容保存之后，重新设置 formChange 
          this.formChange = false
        }
      }
    }

[watch]: https://cn.vuejs.org/v2/api/#vm-watch