Как сохранить исходное состояние объекта в Vue, игнорируя его реактивность?

Как настроить закрытие модального окна таким образом, чтобы при закрытии возвращались контакты из исходного состояния объекта, без изменений в самом объекте?
  • 26 февраля 2024 г. 19:28
Ответы на вопрос 2
Для сохранения исходного состояния объекта в Vue, игнорируя его реактивность, можно создать копию объекта (дело в том, что реактивность Vue отслеживает изменения в объектах, поэтому нужно создать новый объект, который не будет связан с системой реактивности Vue). 

Примерно так можно сделать: 

```javascript
data() {
  return {
    originalContacts: {
      name: 'John Doe',
      email: 'johndoe@example.com'
    },
    contacts: {
      name: 'John Doe',
      email: 'johndoe@example.com'
    }
  }
},
methods: {
  openModal() {
    this.contacts = Object.assign({}, this.originalContacts);
    // открываем модальное окно
  },
  closeModal() {
    this.contacts = Object.assign({}, this.originalContacts);
    // закрываем модальное окно и восстанавливаем контакты из исходного состояния объекта
  }
}
```

В данном коде при открытии модального окна мы создаем копию объекта `originalContacts` и присваиваем ее свойству `contacts`. При закрытии модального окна мы снова восстанавливаем исходные контакты из объекта `originalContacts`.

Таким образом, при закрытии модального окна возвращаются контакты из исходного состояния объекта, без изменений в самом объекте.
Просто сохранить копию объекта. Самое простое сделать так: 
const mySourceCopy = JSON.parse(JSON.stringify(objectOrArray));
Похожие вопросы