PUT http://localhost:3000/events/undefined 404（未找到）

Question

this code updates a specific object by taking it's id. when i hard code the id into the API cal, there is no error and it works just fine, but when i pass the id that it gets from the component in a new argument into the 'updateEvent' function it returns undefined id. i think the problem is inside the vuex code inside the parameters that I'm passing

axios API call

updateEvent(id, event) {
        return apiClient.put(`/events/${id}`, event)
}

and in vuex actions

updateEvent({
      commit,
      dispatch
    }, {
      id,
      event
    }) {
      return EventService.updateEvent(id, event)
        .then(() => {
          commit('UPDATE_EVENT', event)
        })
    }

and I dispatched it inside my component like this

methods: {
    updateEvent() {
      this.$store
        .dispatch("updateEvent", this.id, this.event)
        .then(() => {
          this.$router.push({
            name: "EventShow",
            params: { id: this.id },
          });
        })
        .catch(() => {});
    },
  }

Answer 1

Your action unpacks/destructures id and event from the payload (the 2nd argument), but your dispatch is not passing an object. Instead, it's passing this.id -- presumably a String , which does not contain a property named id or event (hence, id resolves to "undefined" in your URL).

To resolve the problem, your dispatch should pass an object with the expected properties:

//this.$store.dispatch("updateEvent", this.id, this.event); // DON'T DO THIS
this.$store.dispatch("updateEvent", { id: this.id, event: this.event })