Vue.jsで記事詳細のデータを取得

Vue.jsで記事詳細のデータを取得:

Vue.jsで記事詳細ページのURLを記事IDに設定して、その記事のdataを展開していくときの書き方です。

routerを設定

「vue-router」をinstall

$ yarn add vue-router 

vue-routerをインスタンスにして#appに読み込む。

main.js

import Vue from 'vue'; 
import VueRouter from 'vue-router'; 
import App from './App'; 
import routes from './routes'; 
 
Vue.use(VueRouter); 
 
const router = new VueRouter(routes); 
 
new Vue({ 
  el: '#app', 
  components: { App }, 
  template: '<App/>', 
  router, 
}); 

routes.js

import Articles from './page/Articles'; 
import Detail from './page/Detail'; 
 
export default { 
  mode: 'history', 
  routes: [ 
    { 
      path: '/articles', 
      component: Articles, 
      name: 'articles', 
    }, 
    { 
      path: '/articles/:id', 
      component: Detail, 
      name: 'detail', 
    }, 
  ], 
}; 

記事詳細ページにその記事のデータを取得

記事一覧で記事をClickして詳細ページに遷移したときに、その記事のデータをURLの「:id」を元に取得します。

まずは記事一覧で記事詳細の遷移先を/articles/:idにしました。

ArticleItem.vue

<template> 
  <ul> 
    <li　v-for="(article, index) in articles" :key="index"> 
      <a :href="'/articles/' + article.id"> 
        {{article.text}} 
      </a> 
    </li> 
  </ul> 
</template> 
 
<script> 
export default { 
  computed: { 
    articles() { 
      return this.$store.state.articles; // storeから記事データを取得 
    }, 
  }, 
}; 
</script> 

詳細ページに遷移してURLが/articles/:idになったとき、this.$route.params.idでその「:id(記事id)」を取得できます。

そこで、storeのdataからそのidと一致するdataを抽出してcomponentのpropsに渡しています。

Detail.vue

<template> 
  <div> 
    <article-detail 
      :data="ArticleData" 
    > 
    </article-detail> 
  </div> 
</template> 
 
<script> 
import ArticleDetail from '../components/ArticleDetail'; 
 
export default { 
  computed: { 
    ArticleData() { 
      const dataId = parseInt(this.$route.params.id, 10); 
      const data = this.$store.state.articles.find(a => ( 
        a.id === dataId 
      )); 
      return data; 
    }, 
  }, 
  components: { 
    articleDetail, 
  }, 
}; 
</script> 

ArticleDetail.vue

<template> 
  <div> 
    <p>{{data.title}}</p> 
    <p>{{data.text}}</p> 
  </div> 
</template> 
 
<script> 
export default { 
  props: { 
    data: Object, 
  }, 
}; 
</script> 

こんな感じで合っっていますでしょうか？

参考サイト

• vue-router
• これから始めるVue.js 2.0