I have a child component “DetailsDialog” in which I watch for a prop change and then request an API call. The problem is that the API call is executing twice instead of once, so, I believe is because the component is updating double. I am using VueJS 2.7, OptionsAPI and basically I just want that when I click a row in a datatable the app call an API to show data dynamically. I even called updated() hook and inside a console.log and indeed, is updating twice. So, I need to call the API just once in the component when its prop is updated. I’d appreciate the help, thanks in advance
// Component child DialogDetails.vue
props: {
// other props {...},
// desired prop
selected_company: {
type: Object,
default() {
return {}
}
},
},
watch: {
selected_company(val) {
if (val !== null) {
this.apiCall()
}
},
},
// Event in other sibling component
rowClick: function (item, row) {
this.$emit('openDetailsModal', {selected_user: null, selected_company: item, open_details: true})
},
// Parent component
<dialog-details :show-details-modal="open_details"
:selected_company="selected_company"
@closeDialog="closeDetails" />