Connecting with the Community
Within my application, I showcase a list of doctors in the DoctorView component using the following code:
<div
class="col-12 m-2"
v-for="recommendation in recommendations"
:key="recommendation"
>
<DoctorListItem :recommendation="recommendation" />
</div>
My goal is to enable users to click on an entry in the doctor's list and be directed to a detailed page about that specific doctor. To achieve this, I utilize a router-link within the DoctorListItem component:
<router-link
:to="`/doctors/${recommendation.doctor.doctor_id}`"
class="stretched-link"
></router-link>
The challenge I am facing now is passing this id to the ReadDoctorView component which displays comprehensive information about the selected doctor. While the necessary id is accessible in both DoctorView and DoctorListItem components, I struggle to pass it along to ReadDoctorView. I attempted using props but as a beginner, I am uncertain about how to define them and manage the data effectively.
In ReadDoctorView, I require a method similar to the one below to retrieve details for 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("An error occurred: " + error.response);
});
},
},
I hope my explanation clarifies my objective, and I appreciate any guidance you can offer.
Note: I am encountering warnings from vue router due to unfamiliar routes. Any suggestions on how to address these warnings would be greatly appreciated: https://i.sstatic.net/h0v0Y.png