@Esm322

Как сохранить начальное состояние объекта в обход реактивности vue?

Подскажите, пожалуйста, при открытии модального окна, получаю объект. В этом объекте есть массив с контактами, которые потом рендерятся. Мне нужно, чтобы при использовании метода закрытия (close()) модального окна, в котором не происходит мутация объекта, рендерились контакты начального состояния объекта
Модальное окно:
<template>
  <ModalWindow>
    <div class="modal__header">
      <h3 class="modal__title">
        Изменить данные
      </h3>
      <span class="modal__id-title">
        ID: {{ client.id }}
      </span>
      <button class="btn-reset" @click="close">
        <span class="close" id="close">
          <CloseModalSVG/>
        </span>
      </button>
    </div>
    <form id="form" class="form form__modal">
      <div class="form__inputs">
        <label class="form__label">
          <span class="label__input-title">
            Фамилия*
          </span>
          <input type="text" id="input-firstname" class="label__input" name="second-name"
          v-model="secondName">
        </label>
        <label class="form__label">
          <span class="label__input-title">
            Имя*
          </span>
          <input type="text" id="input-secondname" class="label__input" name="first-name"
          v-model="firstName">
        </label>
        <label class="form__label">
          <span class="label__input-title">
            Отчество
          </span>
          <input type="text" id="input-thirdname" class="label__input" name="third-name"
          v-model="thirdName">
        </label>
      </div>
    </form>
    <div id="form__add-contact" class="form__add-contact">
      <div class="add-contact__wrapper-contacts" v-show="copyContacts.length > 0"
      :class="{ 'add-contact__wrapper-contacts--active': copyContacts.length > 1 }">
        <ModalWindowAddBlock v-for="contact in addBlocks" :key="contact"
        :length="addBlocks.length"
        v-model:select-value="contact.selectValue"
        v-model:input-value="contact.inputValue"/>
      </div>

      <button class="add-contact__add-btn btn-reset"
      @click.prevent="pushAddBlock">
        <AddContactSVG/>
        Добавить контакт
      </button>
    </div>
    <div class="form__wrapper-btn-save">
      <button id="btn-save-contact" class="wrapper-btn-save__btn-save btn-reset"
      form="form"
      @click.prevent="change">
        Сохранить
      </button>
    </div>
    <button id="btn-cancel-contact" class="btns__btn-cancel btn-reset"
    style="width: 100px;"
    @click.prevent="deleteItem(client.id)">
      Удалить клиента
    </button>
  </ModalWindow>
</template>

<script>
import { mapState, mapActions } from 'pinia';
import { useClientsStore } from '@/stores/clientsData';
import ModalWindow from './ModalWindow.vue';
import ModalWindowAddBlock from './ModalWindowAddBlock.vue';
import AddContactSVG from './SVG components/AddContactSVG.vue';
import CloseModalSVG from './SVG components/CloseModalSVG.vue';

export default {
  data() {
    return {
      addBlocks: this.activeId.contacts,
      firstName: this.activeId.firstName,
      secondName: this.activeId.secondName,
      thirdName: this.activeId.thirdName,
    };
  },
  props: ['activeId'],
  components: {
    ModalWindow,
    ModalWindowAddBlock,
    AddContactSVG,
    CloseModalSVG,
  },
  computed: {
    ...mapState(useClientsStore, ['clientsData']),
    client() {
      return this.clientsData.find((item) => item.id === this.activeId.id);
    },
    copyContacts() {
      return this.client.contacts;
    },
  },
  methods: {
    ...mapActions(useClientsStore, ['changeClient', 'deleteClient']),
    close() {
      this.$emit('closeModalChanges');
      this.addBlocks = [];
    },
    closeWithSaving() {
      this.$emit('closeModalChanges');
    },
    change() {
      this.changeClient(
        this.activeId.id,
        this.firstName,
        this.secondName,
        this.thirdName,
        this.addBlocks,
      );

      this.closeWithSaving();
    },
    deleteItem(id) {
      this.deleteClient(id);
      this.closeWithSaving();
    },
    pushAddBlock() {
      this.addBlocks.push({
        block: ModalWindowAddBlock,
        selectValue: 'phone',
        inputValue: '',
      });
    },
  },
};
</script>


Пробовал через Object.assign(), как было написано в док-ии, но ничего не получилось. Заранее спасибо
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
yarkov
@yarkov Куратор тега Vue.js
Помог ответ? Отметь решением.
Просто сохранить копию объекта. Самое простое сделать так:
const mySourceCopy = JSON.parse(JSON.stringify(objectOrArray));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы