Приравнивание двух объектов, не работающих при передаче в качестве опоры

Question

Я передаю рабочий объект как опору для просмотра. vue поле, где в смонтированном методе я приравниваю его к объекту менеджера в компоненте. Проблема здесь в том, что когда я this.manager = this.worker, задание не работает. Но если я назначу каждому полю индивидуальное, тогда оно будет работать как

this.manager.contact.first_name = this.worker.contact.first_name
this.manager.contact.last_name = this.worker.contact.last_name
this.manager.address = this.worker.address

Но вместо того, чтобы вручную назначать каждое поле, я хочу установить объект-менеджер, равный рабочему объекту. Пожалуйста, помогите мне найти, где я ошибаюсь.

Ниже приведен код.

<template>
 <v-data-table
  :headers="headers"
  :items="availabilities"
  hide-actions
  :disable-initial-sort="true"
  class="office-table"
  >
  <template slot="items" slot-scope="props">
   <td>{{ props.item.first_name }}</td>
   <td>{{ props.item.last_name }}</td>
   <td>{{ props.item.address }}</td>
   <td>
     <div>
       <a class="" href='javascript:void(0);'
        slot="activator"
        @click="assignmentValue(props.item)">
        <i class="material-icons add">add</i>
       </a>
     </div>
   </td>
  </template>
 </v-data-table>

 <UserForm :worker="user"></UserForm>
</template>

<script>
  import UserForm from 'user/view.vue'
  export default {
    components: {
      UserForm
    },
    data: function() {
      return {
        user: {
          address: '',
          contact: {
            first_name: '',
            last_name: '',
          }
        },
        availabilities: []
      }
    },
    created() {
      this.fetchAvailabilities();
    },
    methods: {
      fetchAvailabilities() {
        var that = this;
        this.$axios.get('availabilities.json')
        .then(response => {
          that.availabilities = response.data;
        });
      },
      assignmentValue(worker) {
        this.user.contact.first_name = worker.first_name;
        this.user.contact.last_name = worker.last_name;
        this.user.address = worker.address;
      }
    }
  }
</script>

Просмотр. vue

<script>

  export default {
    props: ['worker'],
    data: function () {
      return {
        manager: {
          contact: {
            first_name: '',
            last_name: '',
            email: '',
            phone: ''
          },
          address: '',
        },
      }
    },
    mounted() {
      this.manager = this.worker
    },
  };
</script>

Answer 1

Вы можете использовать Object.assign или синтаксис распространения объекта , чтобы скопировать значения из рабочего объекта в объект-менеджер, если они имеют одинаковую форму.

Например:

this.manager = Object.assign(this.manager, this.worker);