Question

我想显示带有相关答案的问题。不幸的是，如果我加载单个 QuestionPage，它不会显示所有答案。这是因为我在 ./components/Answers.vue 组件中发现了一个逻辑错误。

我认为问题出在我的 fetch () 函数中，其中端点链接未定义（控制台错误 https://prnt.sc/198ebdx 的屏幕截图）

此 Answers 组件用于 QuestionPage 中，我认为 Question 组件未正确引用 Answer 组件。

Answer 1

您在 <answers :question="question"></answers> 组件中的 QuestionPage.vue 应该有一个 v-if="question.id" 以防止加载组件，以防您的 question 函数中定义的 data() 没有存在。

说明

由于在您的 HTTP 请求中使用了未定义的变量，因此在您的控制台中引发了错误。

查看您的 Answers.vue 组件，您的 created 函数中有以下代码：

created () {
    this.fetch(`/questions/${this.questionId}/answers`);
},

这个问题 ID 指的是你在同一个 Answers.vue 中的道具/数据结构：

export default {
    props: ['question'],
    mixins: [highlight],
    data () {
        return {
            questionId: this.question.id,
            count: this.question.answers_count,
            answers: [],
            answerIds: [],
            nextUrl: null
        }
    }
}

在您的 QuestionPage.vue 组件中，您将 question 作为道具传递给您的 Answers.vue 组件。然而，这个变量可能是未定义的。你应该先检查这个函数的结果

mounted () {
    this.fetchQuestion ();
    //  alert(this.question)
    //  console.log(this.question)
},

methods: {
    fetchQuestion () {
        axios.get(`/questions/${this.slug}`).then(({data})=> {
          this.question = data.data
        }).catch(error => console.log(error))
    }
}

如果该函数没有结果，请确保您的 slug 道具正确并由后端处理。

如何解决Vue中的Axios GET请求404错误？

1 个答案: