Wie kann der Axios GET Request 404-Fehler in Vue behoben werden?
P粉738046172
P粉738046172 2023-08-30 00:23:34
0
1
600
<p>Ich möchte Fragen mit zugehörigen Antworten anzeigen. Wenn ich eine separate <code>QuestionPage</code> lade, werden leider nicht alle Antworten angezeigt. Das liegt daran, dass ich einen Logikfehler in der Komponente <code>./components/Answers.vue</code> gefunden habe. </p> <p>Ich denke, das Problem liegt in meiner Funktion <code>fetch()</code> der Endpunktlink ist undefiniert (Screenshot des Konsolenfehlers https://prnt.sc/198ebdx)< ; <p>Diese Answers-Komponente wird in QuestionPage verwendet. Ich denke, dass die <code>Question</code>-Komponente nicht korrekt auf die <code>Answer</code>-Komponente verweist. </p>
P粉738046172
P粉738046172

Antworte allen(1)
P粉191610580

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是正确的,并由后端处理。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage