I have a scenario where I am passing a worker object as a prop to the view.vue field. In the mounted method of the component, I am trying to assign this worker object to the manager object. However, when I use the assignment `this.manager = this.worker`, it does not work. But if I manually assign each field like
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
Rather than manually assigning each field, I want to simply set the manager object equal to the worker object. Can someone please help me identify where I am going wrong?
Here is the code snippet:
<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>
View.vue
<script>
export default {
props: ['worker'],
data: function () {
return {
manager: {
contact: {
first_name: '',
last_name: '',
email: '',
phone: ''
},
address: '',
},
}
},
mounted() {
this.manager = this.worker
},
};
</script>