Recently delving into vue and integrating it with django has been a learning curve for me. In my project, there is a field named status that uses a boolean property with a default value of False. My aim is to update the backend data by triggering an onclick event. Upon clicking the div element, the data will be emitted to the parent component which will then toggle the status from True to False or vice versa.
Child Component:
<div @click="$emit('update-status', this.task)">{{ task.status}} </div>
Parent Component:
<Task v-for="task in tasks"
:key="task.slug"
:task="task"
:slug="task.slug"
@update-status="updateStatus"/>
async updateStatus(task) {
let endpoint = `/api/v1/tasks/${task.slug}/`;
const response = await axios.put(endpoint, {
status: !task.status,
});
}
Upon testing, I found that the status updates correctly only once but then keeps returning the same value (True) on consecutive clicks. The desired behavior is for it to always return the opposite of the current status. Currently, I have to manually refresh the browser after each click to see the correct updated status (False).