Nuxt.js：axiosでJSONplaceholderのデータを取得したい

Question

前提・実現したいこと

プログラミング初心者です。
JSONplaceholderの
こちらのデータを取得したいです。
https://jsonplaceholder.typicode.com/posts/1

発生している問題・エラーメッセージ

ET https://jsonplaceholder.typicode.com/posts/undefined 404

Uncaught (in promise) Error: Request failed with status code 404

該当のソースコード

<script>
import axios from 'axios'

export default {
  data(){
    return {
      posts: [],
    }
  },
  mounted(){
    axios.get('https://jsonplaceholder.typicode.com/posts/' + this.$route.params.id )
    .then(response => this.posts.push(response.data))
  },
}
</script>

試したこと

エラー文にもあるように
this.$route.params.id部分がエラーだと思います。

・ここを1に変えた場合は取得ができました。

mounted(){
    axios.get('https://jsonplaceholder.typicode.com/posts/' + 1 )
    .then(response => this.posts.push(response.data))
  },

・動的ルートマッチングの確認
https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html
posts/_id.vueであれば
this.$route.params.idで問題ないと思いました。

補足情報（FW/ツールのバージョンなど）

  "dependencies": {
    "@nuxtjs/axios": "^5.10.0",
    "nuxt": "^2.0.0",
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11"
  },

Comments

[hayato7]

vue-router使っているんですか？

Answer 1

解決しました！
index.vueファイルで記載しておりましたが
_id.vueにしたら表示されました！

JSONplaceholderのparamsだけ取得できれば良い
=自ファイルは関係ないかと思っていました(;o;)