Vue.js как правильно обнулить сложную форму с предустановленными значениями?

Question

[Фёдор Гребенников]

Приветствую.
Есть SPA-приложение на vue.js. На одной из страниц есть форма, в которую надо предустановить некоторые значения.
А после заполнения и отправки формы вернуть её к исходному виду. Пробовал вроде очевидный вариант, но он почему-то работает очень странным образом. Вот куски кода:

Указываю дефолтное состояние формы (newDealDefaultState) и пустую модель (newDeal)

data: function () {
    return {
      newDealDefaultState: {
        title: '',
        description: '',
        planned_revenue: null,
        actual_revenue: null,
        repeating: false,
        type_id: '1',
        manager_id: '',
        project_id: '',
        source_id: '',
        started_at: '',
        finished_at: '',
        step: '1',
        contact: {
          name: '',
          items: [
            {key: 0, type_id: '1', value: '', comment: '', mask: '9(999)999-99-99'}
          ]
        }
      },
      newDeal: null
...

В хуке created заполняю модель дефолтными значениями:

created: function () {
    this.newDeal = this.newDealDefaultState
}

В форме, конечно, поля привязаны к newDeal:

<el-input tabindex="1" ref="inputTitle" placeholder="Название" v-model="newDeal.title"></el-input>
и т.д.

После заполнения и валидации формы отправляю её (vuex) и пытаюсь вернуть форму к дефолтному значению c помощью метода:

submitForm () {
      this.$store.dispatch('deals_add', this.newDeal)
      this.newDeal = this.newDealDefaultState
      console.log('submit')
      console.log(this.newDeal)
      console.log(this.newDealDefaultState)
},

Форма отправляется, всё ок. Но форма не очищается.
Если посмотреть в консоль, то console.log(this.newDeal) выводит мне заполненную пользователем модель, вместо дефолтной, и console.log(this.newDealDefaultState) выводит мне заполненную пользователем модель

Я ожидаю увидеть, что this.newDeal примет значение this.newDealDefaultState, а получается наоборот.

Где туплю?

Answer 1

[Nikita Velko]

this.newDeal = Object.assign({}, this.newDealDefaultState);

Документация.
Дело в том, что объекты передаются по ссылке, они никогда не копируются. Поэтому когда вы напрямую присваивали один объект к другому, то меняя значение в первом объекте, оно менялось и во втором, и наоборот.

Comments

[Фёдор Гребенников]

Спасибо, работает.
А не могли бы в двух словах объяснить, почему обычное присваивание не работает в этом случае? С JS недавно разбираюсь, первый раз такой способ понадобился.

[Nikita Velko]

Фёдор Гребенников, я в ответе достаточно подробно расписал вам, почему ваше "присваивание" не сработало. :)

[Фёдор Гребенников]

Nikita Velko, ой, не обновил.
Благодарю, теперь всё ясно