[Vuejs]-Vue.js how to pass props/params from parent to child component with vue-router

by

0👍

Based on your route, the Exercise component receives an id prop, not an exercise prop. I do not think you can pass objects in vue-router through routes, and even if you could, I think it would be a bad practice because it would have to serialize the object in the route.

The Exercise component receives an id prop, and should use that to lookup the exercise. Either through an ajax request, vuex, or some other source of state. Since you are using vuex, you could create a getter that returns an object where the keys are the exercise ids, and the values are the exercises. Then you could lookup the exercise in the Exercise component using the id.

Vuex getter

exercisesById(state) {
    var obj = {};
    state.exercises.forEach(x => {
        obj[x.id] = x;
    });
    return obj;
}

Exercise component

<script>
import { firebaseApp, exercisesRef, usersRef } from '../firebaseApp'
import NavDash from './NavDash.vue'

export default {
 props: ['id'],
 components: {
  NavDash
 },
 computed: {
     exercise() {
         return this.$store.getters.exercisesById(this.id);
     }
 },
}
</script>
👤kmc059000

Leave a comment