Vue: Идентификатор передачи другому компоненту

#javascript #vue.js #render #vue-props

#язык JavaScript #vue.js #оказывать #vue-реквизит

Вопрос:

Сообщество

В своем заявлении я представляю список врачей. Этот список отображается в моем компоненте DoctorView следующим образом:

 lt;div   class="col-12 m-2"  v-for="recommendation in recommendations"  :key="recommendation"  gt;  lt;DoctorListItem :recommendation="recommendation" /gt;  lt;/divgt;  

Что я пытаюсь сделать, так это то, что, когда пользователь нажимает на запись в этом списке, я хочу, чтобы приложение открыло подробную страницу об этом враче. Поэтому в моем компоненте DoctorListItem я использую ссылку маршрутизатора:

 lt;router-link  :to="`/doctors/${recommendation.doctor.doctor_id}`"  class="stretched-link"  gt;lt;/router-linkgt;  

Теперь мне нужно передать этот идентификатор в ReadDoctorView, который отображает подробную информацию о выбранном докторе. Потому что мне нужна эта информация, чтобы загрузить данные выбранного врача. Этот идентификатор находится в моем окне DoctorView и в моем списке DoctorListItem, но я не могу передать его в свой компонент ReadDoctorView. Я попробовал это с реквизитом, но я абсолютный новичок, и я не уверен, где определить реквизит и как обрабатывать данные.

В моем представлении readdoctor мне нужен метод, подобный приведенному ниже, чтобы получить выбранного врача:

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

Я надеюсь, что мое объяснение имеет смысл, и вы сможете понять, чего я пытаюсь достичь. Заранее благодарю вас за любые советы!

PS: Я получаю эти предупреждения, потому что маршрутизатор vue не знает этих маршрутов. Есть идеи, как остановить эти предупреждения: введите описание изображения здесь

Ответ №1:

В маршрутизаторе Vue параметры маршрута можно получить, обратившись к объекту $router, попробуйте получить доступ с помощью решения, я надеюсь, что это сработает:

 this.id = this.$route.params.id