Inside my component I have an object property departement received from another component, under every departement I have a list of employees and I'm using the property departement as a parameter of a function to retrieve the list of employees this.departement.employees and display them
the issue here is I remove an employee from management page (another UI) I can't see changes in the list of emplyees attributes (if the user do no longer belong to the departement isdeleted attribute should be updated) the problem indeed is with given parameter that has to be refreshed
export default {
props: {
departement: {
type: Object,
},
},
data: () => ({
employees: [],
}),
created() {
if (this.departement && this.departement.employees) {
this.employees = [];
this.$nextTick().then(() => {
this.employees = this.$dbService.retreiveEmployeeList(this.departement.employees) || [];
console.log('list of employees ',this.departement.employees); });
}
my question is there a way to force the update of the received property before using it as a parameter (I tryed to return through computed property but no way)
According to your UI flow, it is better to change yor prop to employees, but if you need to keep your departement object just use computed properties, because if you made an action into created hook it is only fired when component instance is created (1 time).
export default {
props: {
departement: {
type: Object,
required: true,
default() {
return { departement: [] }
}
}
},
computed: {
employees() {
return this.departement.employees
}
}
}