VUEJS: Component to update a users communication preference

Question

I just need some help identifying what I am missing here. Just can't seem to send the correct data through:

Parent with the CommunicationPreference component:

        <CommunicationPreference
          v-for="(communication, index) in communicationPreference"
          :key="index"
          :consent="communication.consent"
          :name="communication.name"
          @update="updateConsent(consent)"
        />

METHOD

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

CommunicationPrefernce.vue

      <Button
        class="mr-4"
        :text="YES"
        :type="consent === true ? 'primary' : 'secondary'"
        @clicked="updateConsent(true)"
      />
      <Button
        :text="NO"
        :type="consent !== true ? 'primary' : 'secondary'"
        @clicked="updateConsent(false)"
      />

PROPS:

  props: {
    type: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    consent: {
      type: Boolean,
      default: true,
    },
  },

METHOD:

updateConsent(consent) {
  this.$emit('update', consent)
},

STORE:

async updateCommunicationPreferences({ commit, state }, payload) {
        const { consent } = payload
        const { communicationTypeName } = state.communicationTypeName
    
        try {
          const response = await this.$axios.put(`/communication-consent/${communicationTypeName}`, consent)
          const { data: updatedCommunicationPreferences } = response.data
    
          commit('SET_UPDATED_COMMUNICATION_PREFERENCES', updatedCommunicationPreferences)
        } catch (error) {
          commit('ADD_ERROR', { id: 'updateCommunicationPreferences', error }, { root: true })
        }
      },

Attached is the UI I am working towards for reference. the idea is each time the user selects either YES or NO the selection is updated and reflected on the UI

Here is my Swagger doc:

Answer 1

I assume that you have a mapped getter for communicationPreference prop, so that this is correct. I also assume that your @clicked event prop is proper provided the implementation of Button.vue.

So try to change @update="updateConsent(consent)" to @update="updateConsent"

Right now it seems to me that you are making a small mistake between a function call and declaration. Having it such as @update="updateConsent" will trigger updateConsent method, and the function declaration:

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

will take care of getting the consent you pass in your event trigger.