前提・実現したいこと
Nuxt.jsでVuexを用いてURLのクエリスクリプトに応じた内容を表示させたいです。
たとえば
http://localhost:3000/posts/3
にアクセスした場合は
store/posts.js
に記載されている
id=3
に該当するデータを表示したいです。
発生している問題・エラーメッセージ
現在postが表示されません……。
コンソールみたところ
id: this.$route.params.id
はうまく機能してるみたいです。
該当のソースコード
pages/posts/_id.vue
pages/posts/_id.vue
1<template> 2 <div class="container"> 3 <h1>{{ post }}</h1> 4 <p>{{ id }}</p> 5 </div> 6</template> 7 8<script> 9export default { 10 data() { 11 return { 12 id: this.$route.params.id, 13 } 14 }, 15 computed: { 16 post() { 17 return this.$store.state.posts.all.find((post) => post.id === this.id) 18 }, 19 }, 20} 21</script>
store/posts.js
store/posts.js
1export const state = () => ({ 2 all: [ 3 { 4 id: 3, 5 name: "era", 6 meigen: "正義は勝つって、そりゃあ そうだろ、勝者だけが正義だ!!!!", 7 }, 8 { 9 id: 2, 10 name: "yamada", 11 meigen: "どんな未来も受け入れる、差し延べられた手は掴む…!!おれを裁く白刃も受け入れる……、もうジタバタしねェ、エース", 12 }, 13 { 14 id: 5, 15 name: "tanaka", 16 meigen: "おれ達は絶対にくいのない様に生きるんだ!!、いつか必ず海へ出て!!思いのままに生きよう!!誰よりも自由に!!", 17 }, 18 ], 19})
補足情報(FW/ツールのバージョンなど)
Vue.js 2.6.11
npm 6.14.7
Nuxt.js 2.11.0
firebase 8.6.0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/22 05:58