データの再フェッチ中に 500 (RuntimeError) エラーが発生しました: axios および nuxtjs の問題の解決策

Question

<p>WordPress を API として、Nuxt.js を JavaScript フレームワークとして使用して、ブログベースのページを構築しました。 この問題は _slug.vue ファイルで発生します。個々のブログ (プロジェクト) ページに移動すると、個々のブログ投稿が正常に表示されます。ただし、単一のブログ投稿ページをリロードするか、URL を入力すると、コンソールにエラー「GET <em>url</em> 500 (RuntimeError)」が表示されます。 </p> <pre class="brush:php;toolbar:false;"><テンプレート> <div class="単一プロジェクト"> <ヘッダー/> <h1>{{project.title.rendered}}</h1> <article v-html="project.content.rendered"<</article> <クリックしてアクション /> </div></pre> <pre class="brush:php;toolbar:false;"><script> /* eslint を無効にする */ 「axios」から axios をインポートします デフォルトをエクスポート{ データ（） { 戻る { プロジェクト： {} } }、 非同期 asyncData({params}){ return await axios.get('https://my-api.wp/wp-json/wp/v2/project/' params.id) .then((res) => { 戻る { プロジェクト: res.data } }).catch(関数 (エラー) { if (error.response) { // リクエストが行われ、サーバーが応答しました console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); else if (error.request) { // リクエストが行われましたが、応答が受信されませんでした コンソール.ログ(エラー.リクエスト); } それ以外 { // リクエストのセットアップ中にエラーが発生した問題が発生しました console.log('エラー', error.message); } }); } } </script></pre> <p>および一つの目的の接続：</p> <pre class="brush:php;toolbar:false;"><nuxt-link :class="'item' project._embedded['wp:term'][0].map(el => el.name.toLowerCase()).join(' ')" v-for=「プロジェクト内のプロジェクト」 :key="プロジェクトID" :to="{名前: 'projekte-slug', params: { slug: project.slug, id: project.id}}"></pre> <p>項目は nuxt.config.js 内に静的にあります。</p>

编辑

<p>調査の結果、nuxt-link の params オブジェクトで渡される ID が、id の値を取得するために「父」ページが必要なため、再ダウンロード後に失われることが判明しました。この問題を解決するために、API を使用して slug を取得しました。項目を終了し、すべてのプロパティ (例: コンテンツなど) を表示します</p> <pre class="brush:php;toolbar:false;">async asyncData({ params, $axios }) { 試す { console.log(params.slug); const project = await $axios.$get(`https://my-api.wp/wp-json/wp/v2/project?slug=${params.slug}&_embed`) {プロジェクト}を返す } キャッチ (エラー) { ... }</pre></p>

Answer 1

asyncData は、ページを更新するとき、または URL を直接入力するときに再トリガーされません。
これらのイベントが発生したときにデータを取得したい場合は、fetch()hook または middleware を使用できます。

---

編集された回答

続行する前に、@nuxtjs/axios がインストールされていることを確認してください: https://axios.nuxtjs.org/setup

リーリー