[Vuejs]-Vue component using axios to update a preference

by

0👍

As mentioned in the comments, the name of the method called is incorrect.
As mentioned by @qimolin, the values related to each option are not being passed to the function that saves it, this can be done by passing a value at calling the action.

methods: {
    async acceptConsent() {
      await this.$store.dispatch('account/updateCommunicationPreferences', { consent: true })
    },
    async declineConsent() {
      await this.$store.dispatch('account/updateCommunicationPreferences', { consent: false })
    }

or even that simplified with a single method

<CommunicationPreference
          v-for="(communication, index) in communicationPreferenceType"
          :key="index + communication.name"
          :consent="communication.consent"
          :name="communication.name"
          @accept-consent="acceptConsent(true)"
          @decline-consent="declineConsent(false)"
        />

methods: {
  async updateConsent(consent) {
      await this.$store.dispatch('account/updateCommunicationPreferences', { consent })
    }
}

and that parameter must be captured on action

async updateCommunicationPreferences({ commit, state }, payload) {
    const { consent } = payload // true or false. This is the value selected  by the user.

    const { communicationTypeName } = state.communicationTypeName

    if (!communicationTypeName) {
      return
    }

    try {
      const response = await this.$axios.put(`/communication-consent/${communicationTypeName}`)
      const { data: updatedCommunicationPreferences } = response.data

      commit('SET_UPDATED_COMMUNICATION_PREFERENCES', updatedCommunicationPreferences)
    } catch (error) {
      commit('ADD_ERROR', { id: 'updateCommunicationPreferences', error }, { root: true })
    }
  },

Leave a comment