这两天做vue项目时用到了v-model来绑定表单里的输入数据,我们输入数据后表单也能显示我们输入的数据,但是当我们不想修改数据时,点击取消按钮也不能恢复原来的数据,百度了一下,发现可以用js提供的Object.assign()对象方法来解决,原文地址,但总觉得这个方法有点麻烦,于是想到了localStorage.setItem(key,value):将value存储到key字段,我们可以在修改按钮设置点击事件保存我们的原始数据


  
Edit () {//  修改
  // 先用localStorage存储form数据
  
localStorage.setItem('obj', JSON.stringify(this.form))
}

在这里插入图片描述
当我们不想修改数据时可以设置一个取消按钮恢复原数据

cancel () { // 取消
  // 取消时把原来存储的值赋给现在的form对象
  let Item = JSON.parse(localStorage.getItem('obj'))
  this.form = Item
}`

这样我们就可以只用几行代码来解决v-model双向绑定的问题了

Logo

前往低代码交流专区

更多推荐