javascript - 无法从 Vue.js 中的监视属性访问旧值

标签 javascript object vue.js axios

例如,我想从 Vue.js 中的 watch 属性访问旧数据。这是我的例子:

mounted(){
   axios.get(url).then(({data})=>{
     this.data = data //Initialize data to HTML. For example, username='A'
     Object.assign(this.oldValues, {data : data}) //Copying data to OldValues. Both object it should has same value
   })
},
data(){
  return {
    data : //data from mounted()
    oldValues : //Copied from data
  }
},
watch : {
  data : {
    handler : function(after, before){
       console.log(this.data) // show updated value 
       console.log(this.oldValues) // Expect : show copied value from first mounted()
    }
  }
}

当我使用 v-model="data" 编辑数据时,它会成功触发 watch 属性并显示这样的日志。

<input v-model="data.username"> // 'AAA' 

日志显示:

data.username = 'AAA' //From this.data
data.username = 'AAA' //From this.oldValues. Expect, keep show the first data. It should username = 'A'

那么,有什么帮助吗?

最佳答案

这个案例应该使用Deep clone方法。有两种方法可以做到这一点。

1。 Lodash 或类似的库

this.oldValues = _.cloneDeep({data : data})

2。 JSON.Parse + JSON.stringify

this.oldValues = JSON.parse(JSON.stringify({data : data})
引用

关于javascript - 无法从 Vue.js 中的监视属性访问旧值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51841021/

相关文章:

vue.js - Lazy Route 被预取,忽略 webpack 魔法注释 (Vue)

javascript - 重命名对象的不定嵌套数组中的属性

python - 如何向Python中现有的类添加方法?

javascript - 如何在js中将对象数组转换为嵌套对象,反之亦然

javascript - 如何通过html元素访问js对象属性?

javascript - 使用过滤器渲染 html

Laravel Vue js spa 应用程序

javascript - Angular http 返回 $$state 对象

javascript - 避免在页面加载或就绪时执行 javascript 的最佳方法?

javascript - 由于数据量巨大,Javascript 变得无响应和停止