Comunidad

En mi solicitud presento una lista de médicos. Esta lista se muestra en mi componente DoctorView así:

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

Lo que intento hacer es que cuando un usuario haga clic en una entrada de esta lista, quiero que la aplicación abra una página de detalles sobre este médico. Entonces, en mi componente DoctorListItem, uso un enlace de enrutador:

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

Ahora necesito dar esta identificación a ReadDoctorView, que muestra información detallada sobre el médico seleccionado. Porque necesito esta información para cargar los datos del médico seleccionado. Esta identificación está disponible en mi DoctorView y en mi DoctorListItem, pero no puedo obtenerla en mi componente ReadDoctorView. Intenté esto con accesorios, pero soy un principiante absoluto y no estoy seguro de dónde definir los accesorios y cómo manejar los datos.

En mi ReadDoctorView, necesito un método como el siguiente para obtener el médico seleccionado:

 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); }); }, },

Espero que mi explicación tenga sentido y puedas entender lo que estoy tratando de lograr. ¡Gracias de antemano por cualquier consejo!

PD: Recibo estas advertencias porque el enrutador vue no conoce estas rutas. Alguna idea de cómo detener estas advertencias: