前回でデータ取得・テーブルで一覧表示ができたので、今回はデータの詳細表示をやってみました。詳細といってもテーブルの時点で全項目表示されていますが。
本当は指定したIDのデータの取得、というのをやりたかったのですが、
参考にした記事で行のデータを取得する方法を知ってしまったので、今回はやめまして、
テーブルで特定のデータの行クリック→行データ取得→取得したデータ表示
という流れで実装してみました。
実装後の画面はこんな感じです。
テーブルの行リックで真ん中の<v-card>のエリアにデータが表示されます。
テンプレート
v-cardなら見やすいかなと思ったのですが、テキストがグレーでちょっと見づらいかもしれないと思いました。
<v-container>
<v-card>
<v-card-text>タイトル：{{detailTitle}}</v-card-text>
<v-card-text>投稿者：{{detailAuthor}}</v-card-text>
<v-card-text>投稿日：{{detailDate}}</v-card-text>
<v-card-text>本文：{{detailContent}}</v-card-text>
</v-card>
</v-container>スクリプト
clickRowに関しては、以下の記事を参考にさせていただきました。
asyncなのは指定IDで取得というのをやろうとした名残です。
rowで全部取れているということに気づかず、
row.idでID指定しデータをGETしてそれを表示、なんていう回りくどいことをしていたので、修正しました。これも学習に必要な遠回りだったということで…。
export default {
（中略）
data () {
return {
（中略）
detailTitle:'',
detailAuthor:'',
detailDate:'',
detailContent:''
}
},
methods: {
async clickRow (row) {
try{
this.detailTitle = row.title;
this.detailAuthor = row.author;
this.detailDate = row.post_date;
this.detailContent = row.content;
} catch(e) {
console.log("clickRow error" + e);
}
},
(中略)
},この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。