I have a VUE 3 application where we are experiencing some sync issues when clicking on our toggles.
When the toggle is clicked, the app is supposed to call our API with the updated list.
THE PROBLEM: When the toggle is clicked the data within the computed property is correct. We are then emitting that data to the parent component (data is still correct when received at the parent component).
Parent component calls the API which updates the data. But in the request body, the data is not correct, that is still the old list. If I click on one of the toggles again the data being sent is then correct from the previous update (it is one click behind).
Here are the steps the app is going through:
- A vue component emits computed property to the parent component
// CHILD COMPONENT EMITTING DATA TO PARENT
____filters.vue___
<template>
<ion-toggle
@click="changedFilter"
v-model="filter.selected"
:checked="filter.selected"
slot="end">
</ion-toggle>
</template>
setup(props, context) {
const changedFilter = () => {
console.log(props.searchFiltersArr) ------> **THIS DATA IS CORRECT**
context.emit("changedFilter", props.searchFiltersArr);
};
return {
changedFilter,
filters: props.searchFiltersArr,
};
}
- Parent component receives emitted data from the child and calls the API using Axios.
___ SearchFilters.vue _____
<template>
<filters
@changed-filter="updateFilter"
:searchFiltersArr="searchParameters">
</filters>
</template>
export default defineComponent({
name: "SearchFilters",
components: { Filters },
setup() {
const store = useStore();
const searchParameters = computed(() => {
return {
searchParameters: store.state.user.settings.searchParameters,
};
});
async function updateFilter(search: Array<SearchFilter>) {
const headers = {
"Content-type": "application/json",
Authorization:
"Bearer " + "21345",
};
const requestBody = {
user: {
name: "",,
email: "email@email.com",
},
searchParameters: search,
};
console.log(requestBody); -----------> **REQUEST BODY HAS THE CORRECT VALUES FROM CHILD COMPONENT**
await apiClient.put("/settings", requestBody, {
headers,
}); -----> ** REQUEST BODY IN THE ACTUAL REQUEST IS NOT THE UPDATED CONTENT **
}
return {
updateFilter,
searchParameters: searchParameters.value.searchParameters,
};
},
});
The updated data is correct all the way until we call the service. Then the body is incorrect. How can this be?
If i wrap the axios request inside of a set timeout like so, it works.
setTimeout(function (){
axios service }, 2000)
Let me know if you need any further information. This is just a simplified example, as this shows the problem. In the real application we are calling a vuex action which then call the api and thereafter commits the updated state. The issue is exatcly the same though.
The problem is somewhat similar to this post - ReactJS - synchronization issue with axios.post
