Wie kann der Axios GET Request 404-Fehler in Vue behoben werden?

Question

Ich möchte Fragen mit zugehörigen Antworten anzeigen. Wenn ich eine separate QuestionPage lade, werden leider nicht alle Antworten angezeigt. Das liegt daran, dass ich einen Logikfehler in der Komponente ./components/Answers.vue gefunden habe.

Ich denke, das Problem liegt in meiner Funktion fetch() der Endpunktlink ist undefiniert (Screenshot des Konsolenfehlers https://prnt.sc/198ebdx)< ;

Diese Answers-Komponente wird in QuestionPage verwendet. Ich denke, dass die Question-Komponente nicht korrekt auf die Answer-Komponente verweist.

Answer 1

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

解释

控制台中报错是因为在您的HTTP请求中使用了一个未定义的变量。

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

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

这个问题ID是指同一个Answers.vue中的Props / Data结构：

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

在您的QuestionPage.vue组件中，您将question作为prop传递给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 prop是正确的，并由后端处理。