Я писал клиент Vue для API инструктора для сайта электронного обучения, который выбирает связанные темы вопросов и ответов для каждого курса, преподаваемого этим инструктором.
Клиент сначала заполняет список курсов.
Затем, когда щелкают курс, идентификатор этого курса передается дочернему компоненту в виде реквизита, называемого courseid, поэтому дочерний компонент сам может выполнить поиск API, чтобы получить потоки для этого курса, используя этот ID.
Дочерний компонент содержит метод, который выполняет запрос API для получения потоков вопросов и ответов с именем getThreads, используя в качестве параметра этого запроса пропу courseid.
Наконец, наблюдатель наблюдает за опорой courseid и вызывает getThreads, если она меняется. По крайней мере, так должно быть.
Когда я щелкаю курс в списке курсов родительского компонента, идентификатор этого курса успешно передается дочернему компоненту как реквизит courseid (реквизит courseid отображается с правильным значением на панели Vue DevTools ), но консоль браузера отображает следующее:
[Vue warn]: Error in callback for watcher "courseid": "ReferenceError: courseid is not defined"
Вот содержимое раздела <script> вышеупомянутого дочернего элемента:
<script>
import axios from 'axios';
export default {
name: 'qAndAThread',
data() {
return {
axiosResult: [],
isLoading: false,
};
},
props: {
courseid:{
default: '',
type: String
},
watch: {
courseid: function () {
this.getThreads();
},
},
methods: {
getThreads: function makeRequest() {
this.isLoading = true;
const token = '*redacted*';
const instance = axios.create({
baseURL: '*redacted*',
timeout: 100000,
headers: {
Accept: '*/*',
'Content-Type': 'application/json;charset=utf-8',
Authorization: `bearer ${token}`,
},
});
instance
.get(`/courses/${courseid}/questions/?page_size=200`)
.then((response) => {
this.axiosResult = response.data;
this.isLoading = false;
this.unread = this.axiosResult.count;
})
.catch((error) => {
//console.log(error);
this.axiosResult = error;
this.isLoading = false;
});
},
},
};
</script>
Любая предложенная помощь будет с благодарностью получена!