Nuxt.jsでVuexを用いてURLのクエリスクリプトに応じた内容を表示させたい

Question

前提・実現したいこと

Nuxt.jsでVuexを用いてURLのクエリスクリプトに応じた内容を表示させたいです。

たとえば
http://localhost:3000/posts/3
にアクセスした場合は
store/posts.js
に記載されている
id=3
に該当するデータを表示したいです。

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

現在postが表示されません……。
コンソールみたところ
id: this.$route.params.idはうまく機能してるみたいです。

該当のソースコード

pages/posts/_id.vue

<template>
  <div class="container">
    <h1>{{ post }}</h1>
    <p>{{ id }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
    }
  },
  computed: {
    post() {
      return this.$store.state.posts.all.find((post) => post.id === this.id)
    },
  },
}
</script>

store/posts.js

export const state = () => ({
  all: [
    {
      id: 3,
      name: "era",
      meigen: "正義は勝つって、そりゃあ そうだろ、勝者だけが正義だ!!!!",
    },
    {
      id: 2,
      name: "yamada",
      meigen: "どんな未来も受け入れる、差し延べられた手は掴む…!!おれを裁く白刃も受け入れる……、もうジタバタしねェ、エース",
    },
    {
      id: 5,
      name: "tanaka",
      meigen: "おれ達は絶対にくいのない様に生きるんだ!!、いつか必ず海へ出て!!思いのままに生きよう!!誰よりも自由に!!",
    },
  ],
})

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

Vue.js 2.6.11
npm 6.14.7
Nuxt.js 2.11.0
firebase 8.6.0

Answer 1

this.$route.params.idはstring型です。
対して、post.idはnumber型なので一致するidが存在せず、postが表示されないというわけです。

this.$route.params.idをnumber型に変換することで解決されると思われます。

<template>
  <div class="container">
    <h1>{{ post }}</h1>
    <p>{{ id }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
--       id: this.$route.params.id,
++       id: parseInt(this.$route.params.id, 10)
    }
  },
  computed: {
    post() {
      return this.$store.state.posts.all.find((post) => post.id === this.id)
    },
  },
}
</script>

Comments

[YuzaburoEra]

ありがとうございます！無事解決できました！