CODEWITHSUNDEEP
vue.jsvuex
Nathan Boaldin
Nathan Boaldin

Reputation: 315

How do I use Vue.set() properly?

I am trying to make an array within my store reactive.

I have currently tried using :key to force update, $forceUpdate() and Vue.set(). I originally was getting and updating the data within the calendar component, but I moved the get data logic to the store in hopes that somehow it would make it reactive. The current attribute shows a red dot on the prescribed v-calendar date. From what I can tell the array is populating with objects with the exact same structure as the single attribute, but it is not reactive. enter image description here

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loading: true,
    odata: [],
    attributes: [{
      dates: new Date(),
      dot: 'red',
      customdata: {
        programEventsSystemrecordID: 1234
      }
    }]

  },
  mutations: {
    updateAtts (state) {
      let singleAtt = {}
      let index = 0

      state.odata.forEach((ticket) => {
        Vue.set(singleAtt, 'dot', 'red')
        Vue.set(singleAtt, 'dates', new Date(ticket.ProgramEventsStartdate))
        Vue.set(singleAtt, 'customData', {})

        singleAtt.customData = {
          programEventsSystemrecordID: ticket.ProgramEventsSystemrecordID
        }

        Vue.set(state.attributes, index, singleAtt)

        index++
      })
    },
    updateOdata (state, odata) {
      state.odata = odata
    },
    changeLoadingState (state, loading) {
      state.loading = loading
    }

  },
  actions: {
    loadData ({ commit }) {
      axios.get('https://blackbaud-odata-cal-bizcswpdjy.now.sh')
        .then((response) => {
          commit('updateOdata', response.data)
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          console.log(commit('updateAtts'))
          commit('changeLoadingState', false)
        })
    }

  }
})

I expect the array that is being populated within vue to update the DOM. There are no error messages.

Upvotes: 1

Views: 3302

Answers (1)

Slim
Slim

Reputation: 1276

Vue.set is useless in your case. In mostly all cases, it's useless.

It's needed to add new properties in the state that where not initially.

Here, you just have one state property that is build from another.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        loading: true,
        odata: [],
        attributes: [{
            dates: new Date(),
            dot: 'red',
            customdata: {
                programEventsSystemrecordID: 1234
            }
        }]

    },
    mutations: {
        updateAtts (state) {
            state.attributes = state.odata.map(t=>({
                dot: 'red',
                dates: new Date(t.ProgramEventsStartdate),
                customData: {programEventsSystemrecordID: t.ProgramEventsSystemrecordID}
            }))
        },
        updateOdata (state, odata) {
            state.odata = odata
        },
        changeLoadingState (state, loading) {
            state.loading = loading
        }

    },
    actions: {
        loadData ({ commit }) {
            axios.get('https://blackbaud-odata-cal-bizcswpdjy.now.sh')
                .then((response) => {
                    commit('updateOdata', response.data)
                })
                .catch((err) => {
                    console.log(err)
                })
                .finally(() => {
                    console.log(commit('updateAtts'))
                    commit('changeLoadingState', false)
                })
        }

    }
})

Upvotes: 2

Related Questions