CODEWITHSUNDEEP
javascriptvue.jsvuex
Aayush Dhakal
Aayush Dhakal

Reputation: 73

Vuex reactivity problem for list inside nested object

I was trying to create a scheduler app using vuex. To implement the scheduling I used a state property called "scheduleController" which is an object as follows.

const state = {
    scheduleController: {
    2020: {
        11: {
            month: "November",
            count: [{
                days: [],
                timers: [{
                    from: null,
                    interval: null,
                    to: null
                }]
            }]
        }
        12: {
            month: "December"
            ...
        }
    }
}
}

Whenever I press an add button, timers array should be added with another object same as the first one to create multiple schedules for the month in the selected days. For that I've used following mutation:

addTimer: (state, indices) => {
    let timer = {
        from: null,
        to: null,
        interval: null,
    };  
    //indices[0] gives the year and indices[1] gives month-index 
    //and indices[2] gives the nth element of count array in which
    //an empty timer has to be added. 
    Vue.set(state.scheduleController[indices[0]][indices[1]].count[indices[2]].timers, 1, timer)
}

the state changes as I would like it to but it isn't reactive. I've to get to another view and then come back to see the state changing. How can I make it reactive?

Earlier in the above code, I had used

state.scheduleController[indices[0]][indices[1]].count[indices[2]].timers.push(timer)

in place of the Vue.set function. But after watching this link, I have changed it to what it is now but it still didn't work. Thanks. https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Upvotes: 0

Views: 159

Answers (1)

Aayush Dhakal
Aayush Dhakal

Reputation: 73

Solved it

    addTimer: (state, indices) => {
        let timer = {
            from: null,
            to: null,
            interval: null,
        };


    let newScheduleController = JSON.parse(JSON.stringify(state.scheduleController))

    newScheduleController[indices[0]][indices[1]].count[indices[2]].timers.push(timer)

    state.scheduleController = newScheduleController

    },

Upvotes: 1

Related Questions