Community

In my application I render a a list of doctors. This list is displayed in my DoctorView component like this:

 <div    
  class="col-12 m-2"
  v-for="recommendation in recommendations"
  :key="recommendation"
  >
   <DoctorListItem :recommendation="recommendation" />
 </div>

What I am trying to do is, that when a user clicks on an entry in this list, I want the application to open a detail page about this doctor. So in my DoctorListItem component I use a router-link:

<router-link
      :to="`/doctors/${recommendation.doctor.doctor_id}`"
      class="stretched-link"
    ></router-link>

Now I need to give this id to the ReadDoctorView, which displays the detailed informations about the selected doctor. Because I need this information to load the details of the selected doctor. This id is in my DoctorView and in my DoctorListItem available, but I can't get it to my ReadDoctorView component. I tried this with props but i am an absolute beginner and I am not sure where to define the props and how to handle the data.

In my ReadDoctorView I need a method like the one below to get the selected doctor:

methods: {
     getDoctorById() {
       this.id = this.recommendation.doctor.doctor_id;
       console.log(this.id);
       return axios
         .get('http://URL/doctors/${this.id}')
         .then((response) => {
           this.doctordetails = response.data;
           console.log(id);
         })
         .catch((error) => {
          console.log("Ein Fehler ist aufgetreten: " + error.response);
         });
     },
  },

I hope my explanation makes sense and you can understand what I am trying to accomplish. Thank you in advance for any tips!

PS: I receive these warnings because vue router doesn't know these routes. Any idea how to stop these warnings: