前回POSTの実装が形になったので、今回はGETで一覧表示を実装しました。
この記事では簡単なコードの説明と、実装中詰まったところの解説をしていきます。
今回はこちらの記事を参考にさせていただきました。
テンプレート
参考記事のほとんどまんまです。
v-data-tableで、取得したデータをどう表示すればいいのかと困っていたのですが、
テーブル項目にリンク埋め込みをしたときのように、v-data-tableの中身をいじりたいならtemplateを使用すればよかっただけでした。
<v-container style="width: 1200px;">
<v-data-table
:headers="headers"
:items="articleList"
>
<template slot="items" slot-scope="props">
<td class="text-xs-center">{{ props.item.id }}</td>
<td class="text-xs-center">{{ props.item.title }}</td>
<td class="text-xs-center">{{ props.item.name }}</td>
<td class="text-xs-center">{{ props.item.post_date }}</td>
<td class="text-xs-center">{{ props.item.content }}</td>
<td class="justify-center layout px-0">
</td>
</template>
</v-data-table>
</v-container> スクリプト
URLの変数名がPOSTのままですが、今のところいいネーミングが浮かばないのでこのままで…。
mounted()もまだ役割を完全には理解できていない（これがないと一覧取得・表示できないということはわかる）ので、今後の課題です。
export default {
（中略）
data () {
return {
（中略）
headers: [
{
text: 'ID',
value: 'id',
},
{
text: 'タイトル',
value: 'title',
},
{
text: '投稿者',
value: 'author',
},
{
text: '投稿日時',
value: 'post_date',
},
{
text: '本文',
value: 'content',
},
],
articleList: []
}
},
methods: {
async indexArticles () {
this.articleList = [];
try{
const response = await axios.get(process.env.VUE_APP_API_URL)
this.articleList = response.data.data;
} catch(e) {
console.log("articleList error" + e)
}
},
（中略）
mounted() {
this.indexArticles();
}これで一覧表示できました。
ひっかかったところ
はじめ、一覧データ取得の箇所を以下のように書いてしまっていたので、テーブルが空で表示されてしまっていました。
methods: {
indexArticles () {
this.articleList = [];
try{
const response = axios.get(process.env.VUE_APP_API_URL)
this.articleList = response.data;
} catch(e) {
console.log("articleList error" + e)
}
}, 
これだと
一覧データ取得が完了する前に次の処理が動いてしまう
＋
response.dataでは一覧を受け取れない（データ構造が違う）
という二つの問題がある状態でしたので、async/awaitの追加・response.data.dataに修正をして、取得できるようになりました。
↓修正後
methods: {
async indexArticles () {
this.articleList = [];
try{
const response = await axios.get(process.env.VUE_APP_API_URL)
this.articleList = response.data.data;
} catch(e) {
console.log("articleList error" + e)
}
},この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。