Recently, I encountered an issue while trying to create a minimal reproducible sandbox for a coding problem. After forking my previous sandbox and removing irrelevant code, one particular feature suddenly stopped working in the new version. Despite checking that the code was updated and comparing it to the original sandbox where it worked fine, I couldn't figure out why there was a difference in behavior between the two.
The original sandbox can be accessed here: https://codesandbox.io/s/frosty-taussig-v8u4b. In this version, clicking on buttons with numbers increments them instantly as expected.
However, in the minimized sandbox available at: https://codesandbox.io/s/nervous-breeze-ejznz, clicking on these same numbered buttons does not trigger any action until the screen is refreshed.
This discrepancy perplexes me, as the source code remains consistent across both versions of the sandbox. I am keen to understand why the functionality varies despite having identical codebases.
Here are snippets from the mutation and action causing the issue:
SET_VOTE: (state, payload) => {
console.log("SET_VOTE");
const { commentId, vote } = payload;
const comment = state.comments[commentId];
if (vote === 1) {
comment.up += 1;
} else {
comment.down += 1;
}
console.log(comment);
}
Action:
COMMENT_VOTE: async (context, payload) => {
console.log("COMMENT_VOTE", payload);
const mutation = {
commentId: payload.commentId,
vote: payload.vote
};
context.commit("SET_VOTE", mutation);
}
Comment.vue snippet:
<b-button v-on:click="upvote" class="mr-1">
{{ comment.up }}
</b-button>
async upvote() {
await this.$store.dispatch("COMMENT_VOTE", {
vote: 1,
commentId: this.comment._id
});
},