前回書いたように、
一覧・詳細表示・投稿が一つのページになっている状態から、
一覧画面 と 詳細表示/投稿/編集画面 という形への修正を進めています。
今回は、詳細表示を投稿画面の方に移しまして、
一覧画面のデータテーブル行クリック
↓
詳細・投稿画面に遷移、クリックした行のデータ表示
というように、画面遷移と同時にデータ受け渡しをするような動きに修正しました。
先にも書いたように、まず投稿画面に詳細表示を移動させました。
（あと、送信成功のv-alertを閉じられるようにしました。）
本当は投稿フォームと詳細表示を同じところにしたいのですけれど、まず今回はこれで。
一覧の行をクリックで投稿・詳細ページに飛び、詳細表示へデータが受け渡されます。
動きは以下の記事を参考にさせていただきました。
詳細表示ボタンを追加するのではなく、行クリックのままにしたかったので、
Vue-routerなどテンプレート部ではなく、methodsでパラメータを受け渡せる方法を選びました。
行クリック参考↓
一覧画面側のコンポーネントで、行のデータをqueryに入れています。
clickRow (row) {
this.$router.push({
path: '/articledetail',
query :{
title: row.title,
author: row.author,
post_date: row.post_date,
content: row.content
}
})
},そして、詳細表示側のコンポーネントで受け取り、表示させています。
test() {
this.detailTitle= this.$route.query.title
this.detailAuthor= this.$route.query.author
this.detailDate= this.$route.query.post_date
this.detailContent= this.$route.query.content
},
この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。