[Vuejs]-Data Reactivity On Post Request Vue

Although I can’t see your code, I’m pretty certain I know the problem. You have an array but it’s not reactive to the objects within. This is because Vue doesn’t know to observe this array.

If you want your array to be reactive, use Vue.set from within your store model.

Vue.set(this/state, 'array_name', Array<Of objects>)

This will make sure vue watches for changes within the Array.

For your use case, you will need to append the engagement object to the existing array and then use that array:

const engagements = state.engagements

engagements.push(engagement)

Vue.set(state, 'engagements', engagements)

here is the code for the addEngagement in the Vuex

addEngagement(context, engagement) {
      axios.post(('/engagements'), {
        client_id: engagement.client_id,
        return_type: engagement.return_type,
        year: engagement.year,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
        done: false
      })
      .then(response => {
        context.commit('getClientEngagement', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    },

So i’ve tried different configurations of this. I changed my state description that the v-for is iterating to clientengagements

engagement now equals clientengagements

here is the mutation currently

getClientEngagements(state, engagement, clientengagements) {
      state.clientengagements = clientengagements
      clientengagements.push(engagement)
      Vue.set(state, 'clientengagements', clientengagements)
    },

Which is not working. Ive also tried

getClientEngagements(state, clientengagements) {
      state.clientengagements = clientengagements
      clientengagements.push(engagement)
      Vue.set(state, 'clientengagements', clientengagements)
    },

Which will tell me that “engagement” is not defined

If anyone is still able to help this is the Action

addEngagement(context, engagement) {
      axios.post(('/engagements'), {
        client_id: engagement.client_id,
        return_type: engagement.return_type,
        year: engagement.year,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
        done: false
      })
      .then(response => {
        context.commit('getClientEngagements', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    },

The response.data is mutating my clientengagements array to just a single object of the newly added engagement..

context.commit('getClientEngagements`, response.data)

Is commiting to this mutation

getClientEngagements(state, engagement, clientengagements) {
      state.clientengagements = clientengagements
      clientengagements.push(engagement)
      Vue.set(state, 'clientengagements', clientengagements)
    },