Quel est le moyen de résoudre l'erreur 404 de la requête Axios GET dans Vue ?
P粉738046172
P粉738046172 2023-08-30 00:23:34
0
1
604
<p>Je souhaite afficher les questions avec les réponses associées. Malheureusement, si je charge une <code>QuestionPage</code> distincte, toutes les réponses ne s'affichent pas. En effet, j'ai trouvé une erreur logique dans le composant <code>./components/Answers.vue</code> </p> <p>Je pense que le problème vient de ma fonction <code>fetch()</code>, où le lien du point de terminaison n'est pas défini (capture d'écran de l'erreur de console https://prnt.sc/198ebdx)< ; <p>Ce composant Answers est utilisé dans QuestionPage. Je pense que le composant <code>Question</code> ne fait pas correctement référence au composant <code>Answer</code> </p>
P粉738046172
P粉738046172

répondre à tous(1)
P粉191610580

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal