从观察程序回调调用Vue组件时，其属性为"未定义"

Question

我一直在为一个电子学习网站的讲师API编写Vue客户端，该网站获取相关的问答；该教员教授的每门课程的线索。

客户端首先填充课程列表。

接下来，当单击某个课程时，该课程的ID将作为名为courseid的道具传递给子组件，因此子组件可以自己执行API查找，以使用该ID获取该课程的线程。

子组件包含一个方法，该方法执行API请求以获得Q&一个名为getThreads的线程，在该请求中使用道具courseid作为参数。

最后，观察者监视道具courseid，如果它发生变化，则调用getThreads。至少，它应该这样做。

当我单击父组件的课程列表中的一个课程时，该课程的ID将作为道具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>

我们将竭诚为您提供帮助！

Answer 1

.get(`/courses/${courseid}/questions/?page_size=200`)

应该是

.get(`/courses/${this.courseid}/questions/?page_size=200`)

courseid在你的对象上，所以去掉this会变成undefined。如果你做this.courseid，它应该会起作用。

我不了解vue如何维护范围，但您可能也需要这样做：

watch: { 
courseid: function () {
this.getThreads();
},
},

可能需要

watch: { 
courseid: function () {
this.getThreads.bind(this);
},
},