Apakah cara untuk menyelesaikan ralat permintaan 404 Axios GET dalam Vue?

Question

Saya ingin memaparkan soalan dengan jawapan yang berkaitan. Malangnya, jika saya memuatkan QuestionPage yang berasingan, ia tidak menunjukkan semua jawapan. Ini kerana saya menemui ralat logik dalam komponen ./components/Answers.vue

Saya rasa masalahnya adalah dalam fungsi fetch() saya, di mana pautan titik akhir tidak ditentukan (tangkapan skrin ralat konsol https://prnt.sc/198ebdx)< ;

Komponen Jawapan ini digunakan dalam Soalan Halaman Saya rasa komponen Soalan

Answer 1

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

Penjelasan

Ralat yang dilaporkan dalam konsol adalah kerana pembolehubah tidak ditentukan telah digunakan dalam permintaan HTTP anda.

Semak fungsi Answers.vue组件，在created anda mempunyai kod berikut:

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

ID isu ini merujuk kepada struktur Props/Data yang sama Answers.vue:

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

Dalam komponen QuestionPage.vue anda, anda menghantar soalan sebagai prop kepada komponen QuestionPage.vue组件中，您将question作为prop传递给Answers.vue. Walau bagaimanapun, pembolehubah ini mungkin tidak ditentukan. Anda harus menyemak hasil fungsi ini dahulu

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

Jika fungsi tiada hasil, pastikan slug prop anda betul dan dikendalikan oleh bahagian belakang.