Within my application, I have set up 2 distinct routes: one for appointments and the other for doctors. Specifically in the doctors route, my goal is to have the parameters from a click event on the Book Now button (seen in image-1) dynamically replace the values within a select option (illustrated in image-2).
Outlined are my defined routes:
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'appointment',
component: Appointment
},
{
path: '/doctors',
name: 'doctor',
component: Doctor
},
],
})
In Image-1: Within the doctors section, relevant data about different doctors is displayed.
https://i.sstatic.net/k14wL.png
Image-1 Code: Triggering the Book Now button will navigate to the appointment route and update the select options based on specified parameters. Below is the code snippet:
<router-link :class="['btn btn-sm btn-success ml-1 p-1']" :to="{
name: 'appointment',
params: {
book_hospital_id: item.hospitals.id,
book_specialist_id: item.specialists.id ,
book_doctor_id: item.doctors.id
}
}">Book Now</router-link>
In Image-2: The parameters passed will dynamically change the select options as demonstrated below.
https://i.sstatic.net/hDhNa.png
Image-2 Code:
data: function () {
return {
optHospital: '',
optSpeciality: '',
optDoctor: '',
}
},