Erreur 500 (RuntimeError) rencontrée lors de la récupération des données : solution au problème pour axios et nuxtjs

Question

J'ai créé une page basée sur un blog en utilisant WordPress comme API et Nuxt.js comme framework JavaScript. Le problème se produit dans mon fichier _slug.vue. Lorsque je navigue vers une page de blog (projet) individuelle, les articles de blog individuels s'affichent correctement. Cependant, si je recharge une seule page d'article de blog ou si je saisis simplement l'URL, la console affiche l'erreur : GET url

<template>
<div class="projet unique">
    <En-tête />
    <h1>{{project.title.rended}}</h1>
    <article v-html="project.content.rendeded"></article>
    <CliquezPourAction />
</div></pré>

<pre class="brush:php;toolbar:false;"><script>
/* eslint-disable */
importer des axios depuis 'axios'
exporter par défaut{
    données() {
        retour {
            projet: {}
        }
    },
    async asyncData({params}){

            return wait axios.get('https://my-api.wp/wp-json/wp/v2/project/' + params.id)
                .then((res) => {
                    retour {
                        projet : res.data
                    }
                }).catch(fonction (erreur) {
                    si (erreur.réponse) {
                    // Requête effectuée et serveur répondu
                    console.log(erreur.response.data);
                    console.log(erreur.response.status);
                    console.log(erreur.response.headers);
                    } sinon si (erreur.request) {
                    // La demande a été faite mais aucune réponse n'a été reçue
                    console.log(erreur.request);
                    } autre {
                    // Quelque chose s'est produit lors de la configuration de la requête qui a déclenché une erreur
                    console.log('Erreur', erreur.message);
                    }
                });
    }
}
</script>

以及一个项目的链接：

<nuxt-link :class="'item ' + project._embedded['wp:term'][0].map(el => ; el.name.toLowerCase().join(' ')" v-for="projet dans les projets"  :key="project.id" :to="{name : 'projekte-slug', params : { slug : project.slug, id : project.id}}">

目标在nuxt.config.js中是静态的。

编辑

id的值。为了解决这个问题，我通过API使用slug获取了项目，并显示了所有属性（例如标题、内容等）

async asyncData({ params, $axios }) {
        essayer {
            console.log(params.slug);
            const project = attendre $axios.$get(`https://my-api.wp/wp-json/wp/v2/project?slug=${params.slug}&_embed`)
            retourner { projet }
        } attraper (erreur) {
...
}

Answer 1

asyncDataNe se redéclenchera pas lors de l’actualisation de la page ou de la saisie directe de l’URL.
Si vous souhaitez obtenir des données lorsque ces événements se produisent, vous pouvez utiliser fetch()hooks ou middleware.

---

Réponse modifiée

Avant de continuer, assurez-vous d'avoir installé @nuxtjs/axios : https://axios.nuxtjs.org/setup

<script>
export default {
  async asyncData({ params, $axios }) {
    try {
      const project = await $axios.$get(`https://my-api.wp/wp-json/wp/v2/project/${params.id}`)
      return { project }
    } catch (error) {
      if (error.response) {
        // Request made and server responded
        console.log(error.response.data)
        console.log(error.response.status)
        console.log(error.response.headers)
      } else if (error.request) {
        // The request was made but no response was received
        console.log(error.request)
      } else {
        // Something happened in setting up the request that triggered an Error
        console.log('Error', error.message)
      }
    }
  },
}
</script>