yuheijotaki.com

Vue.js / JSON から情報を引っ張ってくる その10

f:id:jotaki:20190212100544p:plain

やること

  • Qiita の API から投稿を描画する。

Qiita のAPIから記事を引っ張ってくる

今回はとりあえず vue.js というタグがついた記事を引っ張るようにしたので、
WordPress の REST API の際と一緒で、axios を使って、https://qiita.com/api/v2/tags/vue.js/items のエンドポイントを指定する。

...
request: function(){
  axios.get( 'https://qiita.com/api/v2/tags/vue.js/items' )
    .then( response => {
    this.posts = response.data;
  })
}
...

参考：

v-bind: 内でデータと文字列を連結する

Qiita のユーザーページのリンクを描画したい場合、https://qiita.com/[USERNAME] のURLになる。
https://qiita.com/ と post.user.id を連結させたいので、

<a :href="`https://qiita.com/${post.user.id}`" target="_blank">

と v-bind: 内にテンプレートリテラルを用いて書くと文字列の連結が可能。

参考：Vueのテンプレートのv-bind内でもJavaScriptのテンプレートリテラルが使えた - GAミント至上主義

まとめ

Github

  • ユーザー取得できていない記事があるのでもう少し調べる。
  • 環境構築（Vue CLI のインストールだけですが）は時間かからなくなってきて慣れた感があります。
  • タグの一覧から選択したタグの記事一覧を表示を次はやってみる
  • ページング（or LOAD MORE）もつけてみたい

参考