2

I working on a schedule with VUE, I'm really new with VUE and with JS. I created VUE component that adds some new properties into the object which already in state and then I take this object with getters and render inside my another VUE component, but unfortunately new properties render only after reloading. Here is snippet from my component where I add new property

    methods: {
                ...mapActions({addDateToState: 'addDate'}),
                addDate () {
                    this.date = this.startTime.time; 
                    //date from datepicker

                    this.addDateToState({date:this.date, year:this.year, time:this.event.time, name:this.event});
                    // object need to add
                },

            }

Here is a snippet from state

const state = {
    schedule: {}
}

Here is actions

addDate ({commit}, date) {
        commit('ADD_DATE', date)
    }

And here is the mutation which does all the work

    ADD_DATE (state, date) {
            if (typeof state.schedule[date.year] === 'undefined') {
                state.schedule[date.year] = {};
            }

            if (typeof state.schedule[date.year][date.date] === 'undefined') {
                state.schedule[date.year][date.date] = {};
            }
            if (typeof state.schedule[date.year][date.date][date.time] === 'undefined') {
                state.schedule[date.year][date.date][date.time] = [];
            }
            state.schedule[date.year][date.date][date.time].push(date.name)
            //interesting that this properties are reactive, so I see chenges when pushh new element to the array, but don't see if it is new property on the object

            console.log(state.schedule)
            //here I see the schedule which already has new properties so mutation works

        }

Getters

const getters = {
schedule() {
        return state.schedule;
    }
}

And here is computed property which get the schedule from getters

computed: {
    ...mapGetters([
        'schedule'
    ])
}

So the problem that I can't make this getter reactive, but I see that state was changed. Can someone help me?

2 Answers 2

4

You need to use Vue.set/this.$set if you are adding new property. See vue docs

Sign up to request clarification or add additional context in comments.

4 Comments

I don't understand this method to the end. I tried it before and replace my mutations to the Vue.set(state.schedule, date.year, {}) for example. And I have error in console ` Vue is not defined` and this.$set is not a function with this.$set(state.schedule, date.year, {}). Maybe I do something wrong?
and as I understand this set the property to the object, but console shows me that I already done this and the problem is when I'm trying to render it
@YaroslavSaenko it is set, but it isnt reactive. Vue dont know when it changes so it cant update\rerender when it changes. As for this.$set - its not available in vuex. As for Vue.set -> obviously u need to import Vue first. vuex.vuejs.org/guide/… - see more examples here specifically for vuex
Man! Thanks, I was struggling with this for a while.
-1

me, when i need a reactive getter in vue a do that:

computed: {
    getSchedule: function () { return this.schedule; }
}

1 Comment

still not reactive. Getters should be reactive by default, but there is some problem with adding new properties to an objects and I don't know how to solve it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.