Question

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

客户首先填充课程列表。

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

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

最后，观察者观看道具courseid并在getThreads发生变化时呼叫。至少应该如此。

当我单击父组件的课程列表中的一门课程时，该课程的ID将作为prop courseid成功传递到子组件（courseid prop在正确的值中显示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);
    },
  },

从观察者回调中调用Vue组件prop'undefined'

1 个答案: