VueJS + VUEX - Problems Concerning Data Transfer

Question

My component:

<div id="event-picker">
  <template v-for="event in $store.state.events">
    <a href="#" v-on:click.prevent="$store.dispatch('prepareEventForm', event)">{{ event.artist }}</a>
  </template>
</div>

My store (mutations):

prepareEventForm(state, event) {
  state.form.time = event.time
  state.form.date = event.date
  state.form.event = event.event
  state.form.artist = event.artist
  state.form.organizer = event.organizer
  state.form.location = event.location
  state.showForm = true
}

The error I get is Cannot read property 'time' of undefined

Where could the problem be?

EDIT:

This is my action method:

prepareEventForm({ commit }) {
  commit('prepareEventForm')
}

Answer 1

The reason you are getting that error is that the event object being passed to your prepareEventForm mutation is undefined.

This is because when you call $store.dispatch('prepareEventForm', event), it calls your prepareEventForm action, passing event in as the second parameter.

You need to add event as the second parameter of your action and pass that as the second parameter in your commit call (which is what calls the prepareEventForm mutation):

prepareEventForm({ commit }, event) {
  commit('prepareEventForm', event)
}