Identifying the Issue
I'm facing a puzzling situation where array values are being displayed on the screen. Initially, everything seems fine with the correct values showing up. However, after navigating to another page or triggering an event, the displayed values mysteriously double. Oddly enough, upon refreshing the screen, the values revert back to normal. I need help in pinpointing the root cause of this strange behavior and finding a resolution.
https://i.sstatic.net/3adgy.png
Upon first glance at the screen, all values appear accurate. But upon returning from a different link, the values seem to have multiplied. A quick refresh fixes the issue without any errors detected.
https://i.sstatic.net/ALIaR.png
Solution Examination
Flow:
① Launch page
② Fetch values from server using "mounted" method
③ Update state with retrieved value using commit
Template:
<v-col cols="9" class="pl-0">
<v-sheet height="600">
<v-calendar
ref="calendar"
v-model="value"
color="primary"
type="week"
:events="events"
:event-ripple="false"
locale="ja-jp"
:day-format="(timestamp) => new Date(timestamp.date).getDate()"
:month-format="(timestamp) => (new Date(timestamp.date).getMonth() + 1) + ' /'"
@mousedown:event="startDrag"
@click:event="showEvent"
@mousedown:time="startTime"
@mousemove:time="mouseMove"
@mouseup:event="endDrag"
@mouseleave.native="cancelDrag"
>
Script:
computed: {
...mapState('schedule', ['events', 'selectedEvent']),
mounted () {
// ② Get values from the server with mounted
this.$axios.$get(url.SCHEDULE_API)
.then((response) => {
let data
response.forEach((res) => {
data = {
id: res.id,
name: res.name,
color: res.color,
start: res.start,
end: res.end,
updated_at: res.created_at,
timed: res.timed,
long_time: res.long_time,
post_id: res.post_id,
post_item_id: res.post_item_id
}
// ③ commit to manage the retrieved value with state
this.$store.commit('schedule/setEvent', data)
})
})
},
Store:
export const state = () => ({
// ③ commit to manage the retrieved value with state
events: [],
・
・
・
})
export const mutations = {
・
・
・
setEvent (state, payload) {
state.events.push(payload)
},
・
・
・