その６です。大体概観が出来上がってきました。
今回は詳細画面への遷移を作りこみます。まずは詳細画面をざっくりと以下のように作成しましょう。
ステップ１：詳細画面を作成する
views/Place.vue
<template>
<div class="place">
<h2>{{place_name}}</h2>
<p>{{place_address}}</p>
<p>{{place_wiki}}</p>
<p><img :src="place_imageurl" width="200"></p>
<h2>Like登録</h2>
<br />
<div v-if="like_exist == 'yes'">
registered \(^o^
</div>
<div v-else>
<button @click="likeregister">Like</button>
</div>
<br />
</div>
</template>
<script>
import firebase from 'firebase'
import 'firebase/firestore'
export default {
name: 'Place',
data () {
return {
place_name: '',
place_address: '',
place_wiki: '',
place_imageurl: '',
user_id: '',
like_exist: 'no',
place_id: ''
}
},
created: function(){
const params = this.$route.params.place_id
console.log(params)
firebase.firestore().collection('place').doc(params).get().then((doc) => {
console.log(doc.data())
this.place_name = doc.data().name
this.place_address = doc.data().address
this.place_wiki = doc.data().detail
this.place_imageurl = doc.data().image_url
this.place_id = doc.id
})
const uid = firebase.auth().currentUser.uid
console.log(uid)
firebase.firestore().collection('like').where('user_id','==',uid).where('place_id','==',params).get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.like_exist = 'yes';
console.log(this.like_exist)
})
})
},
methods: {
likeregister: function () {
firebase.firestore().collection('like').add({
place_id: this.place_id,
place_imageurl: this.place_imageurl,
place_name: this.place_name,
user_email: this.user_id
}).catch(function (error) {
console.error('Error adding document: ', error);
})
console.log('お気に入り登録');
this.like_exist =='yes'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0 10px;
}
a {
color: #42b983;
}
input {
margin: 10px 0;
padding: 10px;
}
h2 {
background:#1c4b7a;
color:#fff;
}
</style>
それほど難しいことはしていません。単にFirebaseからデータを引っ張ってきているだけですね。
ポイントは「const params = this.$route.params.place_id」のところ。
this.$route.params.place_idで、placeのidを受け取っています。
このplace_idをどのように受け取るのかはroute.jsに記載します。
ステップ２：router.jsを少し書き換える
route.jsを以下のように書き足しましょう。
route.js
{
path: '/place/:place_id',
name: 'place',
component: () => import(/* webpackChunkName: "about" */ './views/Place.vue')
}
route.jsに設定した「:place_id」と「const params = this.$route.params.place_id」のところ。このようにrouteを指定することで「:place_id」にあたる文字列を、paramsの中に保持することができます。
ステップ３：Top.vueに遷移先リンクを設ける
今回、Top画面にPlace一覧があるので、そこに詳細ページへのリンクをつけ足してあげましょう。
Top.vueを以下のように書き換えます。
views/Top.vue
<template>
<div class="place">
<h2>Place一覧</h2>
<ul>
<li v-for="place in placelist">{{place.data().name}}
<router-link :to="{ name: 'place', params: { place_id: place.id }}">詳細</router-link>
</li>
</ul>
</div>
</template>
<script>
import firebase from 'firebase'
import 'firebase/firestore'
export default {
name: 'top',
data () {
return {
placelist: []
}
},
created: function(){
firebase.firestore().collection('place').get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.placelist.push(doc)
console.log(doc)
})
})
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0 10px;
}
a {
color: #42b983;
}
input {
margin: 10px 0;
padding: 10px;
}
h2 {
background:#1c4b7a;
color:#fff;
}
</style>
画面遷移の勘所
１．遷移先リンクのパラメータを設置
Top.vue
<router-link :to="{ name: 'place', params: { place_id: place.id }}">詳細</router-link>
２．遷移先のURLパス（パラメータつき）を記載
router.js
path: '/place/:place_id',
３．遷移先でのパラメータの受け取り、firebaseでplace_idをキーにデータ引っ張る
Place.vue
this.$route.params.place_id
この三つの関係性が頭に入っていたら、昔ながらのアプリケーションにあるような画面遷移はできるようになると思います
丸暗記しちゃいましょう。
次回はmypageを作成し、firestorageへ画像をアップロードするような機能を作ってみましょう。