Quel est le moyen de résoudre l'erreur 404 de la requête Axios GET dans Vue ?

Question

Je souhaite afficher les questions avec les réponses associées. Malheureusement, si je charge une QuestionPage distincte, toutes les réponses ne s'affichent pas. En effet, j'ai trouvé une erreur logique dans le composant ./components/Answers.vue

Je pense que le problème vient de ma fonction fetch(), où le lien du point de terminaison n'est pas défini (capture d'écran de l'erreur de console https://prnt.sc/198ebdx)< ;

Ce composant Answers est utilisé dans QuestionPage. Je pense que le composant Question ne fait pas correctement référence au composant Answer

Answer 1

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

Explication

L'erreur signalée dans la console est due au fait qu'une variable non définie a été utilisée dans votre requête HTTP.

Vérifiez que votre Answers.vue组件，在created fonction possède le code suivant :

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

Cet ID de problème fait référence à la structure Props/Data dans le même Answers.vue :

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

Dans votre composant QuestionPage.vue, vous transmettez question comme accessoire au composant QuestionPage.vue组件中，您将question作为prop传递给Answers.vue. Cependant, cette variable peut être indéfinie. Vous devriez d'abord vérifier le résultat de cette fonction

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))
    }
}

Si la fonction n'a aucun résultat, assurez-vous que vos accessoires slug sont corrects et gérés par le backend.