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