お世話になっております、皆様のお知恵を賜われたらと思い質問させていただきます。
今回vueトレーニングとして、こちらのElectronの入門書にて紹介されているchatアプリ(本書内ではReactにて実装)をvueで実装するトレーニングをしています。
vue init vue_tutorial webpack
にて立ち上げたデフォルトのコンポーネントです。
ディレクトリ構成
- build/ - config/ - database.rules.json - dist/ - firebase.json - index.html - public/ - static - src/ - assets/ - logo.png - Components/ - Room.vue - Rooms.vue - Signin.vue - Signup.vue - router/ - index.js - store/ - index.js - firebase.config.js - App.vue - main.js
今回やりたいこと
ホーム画面にアクセス -> ログイン / 登録(Email・password or Google Auth or Twitter Auth) -> ルーム一覧 -> ルーム画面
といった動線を想定しています。
今回躓いてしまった点は、ルーム一覧 -> ルームの部分です。
routerにて各コンポーネントのルーティングを設定している状態です。
JavaScript
1Vue.use(Router) 2 3let router = new Router({ 4 mode: 'history', 5 routes: [ 6 { 7 path: '/', 8 name: 'Signup', 9 component: Signup 10 }, 11 { 12 path: '/signin', 13 name: 'Signin', 14 component: Signin 15 }, 16 { 17 path: '/rooms', 18 name: 'Rooms', 19 component: Rooms, 20 children: [ 21 { 22 path: '/room/:id', 23 name: 'Room', 24 component: Room, 25 props: route => ({ id: Number(route.params.id) }) 26 } 27 ] 28 } 29 ] 30}) 31 32router.beforeEach((to, from, next) => { 33 let requireAuth = to.matched.some(record => record.meta.requireAuth) 34 let currentUser = firebase.auth().currentUser 35 if (requireAuth) { 36 if (!currentUser) { 37 next({ 38 path: '/signin', 39 query: { redirect: to.fullPath } 40 }) 41 } else { 42 next() 43 } 44 } else { 45 next() 46 } 47}) 48 49export default router
ルーム一覧のコンポーネントでは、firebaseからルームのデータを取得し描画する動作と、新しくルームを作成する動作を実装しています。
JavaScript
1<template> 2 <section class="app-rooms"> 3 <div class="add-rooms-wrap"> 4 <input type="text" placeholder="general" v-model="name" /> 5 <textarea placeholder="共有チャンネルです" v-model="desc" /> 6 <button type="button" @click="create()">作成</button> 7 </div> 8 <div class="rooms-list"> 9 <ul> 10 <li class="app-room-item" v-for="item in rooms"> 11 <router-link :to="{ name: 'Room', params: { id } }"> 12 <div class="room-thumb"><img :src="thumb" /></div> 13 <div class="room-desc-wrap"> 14 <h4 class="room-name">{{ item.name }}</h4> 15 <p class="room-desc">{{ item.desc }}</p> 16 </div> 17 </router-link> 18 </li> 19 </ul> 20 </div> 21 </section> 22</template> 23 24<script> 25import firebase from 'firebase' 26export default { 27 name: 'Rooms', 28 data () { 29 return { 30 rooms: [], 31 thumb: '', 32 name: '', 33 desc: '' 34 } 35 }, 36 created () { 37 firebase.auth().onAuthStateChanged(user => { 38 if (user) { 39 this.listen() 40 } 41 }) 42 }, 43 methods: { 44 listen: function () { 45 firebase.database().ref('roomsList/').on('value', snapshot => { 46 if (snapshot) { 47 const rootList = snapshot.val() 48 let rooms = [] 49 Object.keys(rootList).forEach((val, key) => { 50 rootList[val].id = val 51 rooms.push(rootList[val]) 52 }) 53 this.rooms = rooms 54 } 55 }) 56 }, 57 create: function () { 58 if (!this.name || !this.desc) return 59 firebase.database().ref('roomsList/').push({ 60 name: this.name, 61 desc: this.desc 62 }) 63 this.name = '', 64 this.desc = '' 65 } 66 } 67} 68</script>
配列は下記のような状態です。
roomList: [ [自動割当id]: { name: '' desc: '' message: [ { user: '', photoURL: '' message: '' } ] } ]
<router-link :to="{ name: 'Room', params: { id } }">
にて選択されたルームのidを取得しURLに割当、該当する情報を描画したルーム詳細のコンポーネントに遷移させようと考えています。
試したこと
公式のドキュメントに則り動的ルートマッチングが今回やりたいことに該当するのではと考え、試してみたのですが、undefinedと表示されてしまい正常に情報が描画されませんでした。
その後こちらのサイトを参考にさせていただき、上記に記載したrouterとcomponent内のrouter-linkの書き方にしましたが、URLはlocalhost:8080
に戻ってしまいroomのコンポーネントにもたどり着かなくなってしまいました。
今回やりたいこと
rooms.vueにてfirebaseに登録されているチャットルーム一覧を取得、描画。
各ルーム名をクリックされたとき、該当する配列のidをURLに割当、該当の情報をルームのコンポーネントに描画し遷移させたいです。
何卒皆様のお知恵を賜れたらと思います。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。