Не удается получить доступ к старому значению из свойств часов в Vue.js

1

Например, я хочу получить доступ к старым данным из свойств часов в Vue.js. Это мой пример:

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'

Итак, любая помощь?

Теги:
object
vue.js
axios

2 ответа

1
Лучший ответ

В этом случае должен использоваться метод Deep clone. Есть два способа сделать это.

1. Библиотека Lodash или Similiar

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

2. JSON.Parse + JSON.stringify

this.oldValues = JSON.parse(JSON.stringify({data : data})
Ссылка
1

С Object.assign(this.oldValues, {data: data}) oldValues - это просто ссылка на data. В этом случае oldValues будет обновляться при изменении data.

В следующем примере вы получите реальную копию data:

this.oldValues = Object.assign({}, this.oldValues, {data : data})

Объекты JavaScript являются ссылочным типом.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Comparing_Objects

  • 0
    Извините, я был отмечен как сделано ранее. Но на самом деле этот путь все равно не сработает. Я получил ссылку, почему это происходит, и Object.assign все еще копируется как ссылка. github.com/vuejs/vue/issues/971 Это работает, когда я использую lodash deepClone . Но я все еще нахожу другой путь без Лодаша. Если бы у вас был другой ответ, я был бы рад проверить его. Спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню