Why does undefined appear when using the state object of vuex 3.6 in a method?

Question

I am building the application using vue 2.6.11 and vuex 3.6.0

The page I'm building is for event registration. Get ActiveEvent (event ID, date, location, etc.) from database using API

The registration form first asks for an email address. After the email field is blurred, we trigger checkEmail(). This should perform an API call or two. The first call checks to see if there is an email address in the database and returns the ParticipantID, if so then a second call is made to see if the participant has used Event.EventID and ActiveUser.ParticipantID< /p>

The structure of the page being loaded is the page component <EventDetail> called from the router. It has a main component <EventRegistration> which calls two separate sub-components: <EventRegistrationBlurb> which gets the status. ActiveEvent is passed as prop, <EventRegistrationForm> is to get state.ActiveEvent directly. External component<EventRegistration> is responsible for obtaining Event data from the API and setting state.ActiveEvent, successfully executed,

What I can't understand is why when I call checkEmail in the component, this.ActiveEvent is undefined. While the blurb component renders it correctly, the puter component is getting the API and setting the state correctly. If I put the ActiveEvent object into the EventRegistrationForm's template, it renders correctly, it just doesn't get set in time to bind with the method checkEmail()

I have the following code in my child component <EventRegistrationForm>: (note that ActiveEvent is set by the external component and is set correctly)

methods: {
    ...mapActions(['CheckParticipantByEmail']),
    async checkEmail () {
      const payload = {
        email: this.form.email,
        EventID: this.ActiveEvent.EventID  // <-- THIS IS UNDEFINED???
    }
    await this.CheckParticipantByEmail(payload)
  }
},
computed: {
  ...mapState(['ActiveEvent', 'ActiveUser'])
}

Then in my store:

state: {
  ActiveEvent: {},
  ActiveUser: {}
},
mutations: {
  SET_ACTIVE_EVENT (state, payload) {
    state.ActiveEvent = payload
  },
  CHECK_PARTICIPANT_BY_EMAIL (state, payload) {
    state.ActiveUser = payload
  },
  GET_PARTICIPANT_FOR_EVENT (state, payload) {
    state.ActiveUser = payload
  }
},
actions: {
  async CheckParticipantByEmail ({ commit }, payload) {
    console.log('payload', payload)
    const baseUrl = process.env.VUE_APP_API_URL
    const url = `${baseUrl}getParticipantbyEmail`
    const { email, EventID } = payload
    const response = await axios.post(
      url,
      {
        EmailAddress: email
      }
    )
    const User = await response.data[0]
    commit('CHECK_PARTICIPANT_BY_EMAIL', User)
    if (User.ParticipantID > 0) {
      const baseUrl = process.env.VUE_APP_API_URL
      const url2 = `${baseUrl}getParticipantForEvent`
      const payload2 = {
        ParticipantID: User.ParticipantID,
        EventID: EventID
      }
      alert('URL2: ' + url2)
      alert('payload2 participant: ' + payload2.ParticipantID)
      alert('payload2 event: ' + payload2.EventID)
      const response2 = await axios.post(
        url2,
        payload2
      )
      // console.log('response: ', response.data[0])
      const payload3 = response2.data[0]
      commit('GET_PARTICIPANT_FOR_EVENT', payload3)
    }
  }
}

Answer 1

As usual, the result is a faulty interface between the chair and the keyboard. This page is usually accessed from the event list, which is an array of objects with the identifier EventID. When calling a separate event, the identifier is just the ID, so the code in payload 2 should read

const payload2 = {
    ParticipantID: User.ParticipantID,
    EventID: ID // <- NOTE change of identifier.
  }

I think I'll update the API to return consistent identifiers to avoid trouble in the future. Only wasted about 3 hours...