I'm quite new with Vue and Vuex, actually I'm just doing a little app which display events, and you can access to each card event and see details through the card's ID. I passed all the code to vuex Store, and I'm having problems rendering individual cards, based on the error I understand that the problem is accessing the ID, but I'm console logging the props.id, and you can see the result in console:123 (I clicked on the first card and that's the correct ID)

So here's the EventList Component: once I click on one of 'em, I get this console error: Here is the code: EventDetails component:

<template>
  <div >
    <h2>You are on {{ $route.params.props.id }}</h2>
    <span>@{{ event.time }} on {{ event.date }}</span>
    <h4>{{ event.title }}</h4>
    <p>{{ event.description }}</p>
  </div>
</template>

<script>
import store from "@/store";
import { computed } from "@vue/reactivity";
import { onBeforeMount, onMounted, reactive, ref, toRefs } from "vue";
import { useStore } from "vuex";

export default {
  name: "EventDetails",
  props: ["id", "modelValue"],
  setup(props) {
    const state = reactive({
      events: [],
      event: {},
    });

    const message = ref("AsapRocky");

    console.log(props.id)

    onMounted(() => {
      store.dispatch('fetchEvent', props.id)
      });

    const event = computed(() => {
      return store.state.event;
    });

    return {
      event,
      message,
      ...toRefs(state),
    };
  },
};
</script>

store code:

import { createStore } from 'vuex'
import apiClient from '../services/EventService';

export default createStore({
  state: {
    user: 'TommyDemian',
    events: [],
    event: {}
  },
  mutations: {
    SET_EVENTS(state, events){
      state.events = events;
    },
    SET_EVENT(state, event) {
      state.event = event; 
    }
  },
  actions: {
    fetchEvents({ commit }){
      apiClient
        .getEvents()
        .then((response) => {
          commit("SET_EVENTS", response.data)
        })
        .catch((error) => {
          console.log(error);
        });
  },
  fetchEvent({ commit }, id){
    apiClient.getEvent(id)
    .then((response) => {
      commit("SET_EVENT", response.data)
    })
    .catch((error) => {
      console.log(error);
    });
  }
},
  getters: {
  },
  modules: {
  }
})

CodePudding user response：

The stacktrace indicates the problematic reference to id is actually in {{ $route.params.props.id }} from your template.

I assume you were trying to access the component's id prop, which would not be in the route parameters:

<!-- <h2>You are on {{ $route.params.props.id }}</h2> --> ❌
<h2>You are on {{ id }}</h2> ✅