Vue.js＋Firebase+Stripeをさわさわしてみるーその６


その６です。大体概観が出来上がってきました。
今回は詳細画面への遷移を作りこみます。まずは詳細画面をざっくりと以下のように作成しましょう。

##ステップ１：詳細画面を作成する

```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>
```

「http://localhost:8080/top」から詳細のリンクを押したら、詳細ページ「http://localhost:8080/place/K3ulSdFAyFdWbctNx52Z」に遷移するはずです。

##画面遷移の勘所

１．遷移先リンクのパラメータを設置

```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へ画像をアップロードするような機能を作ってみましょう。