道場生の情報を表示させたい。
解決したいこと
Nuxt.jsとfirebaseを使って道場生アプリを製作中です。道場生の情報を取得することはできたのですが表示させることができず困っています。
発生している問題・エラー
エラーメッセージは表示されません。
該当するソースコード
<template>
<v-app>
<v-main>
<v-container>
<v-row>
<v-col>
<v-card>
<v-card-title>
<!-- <StudentDetail :firstName="student.firstName">
</StudentDetail> -->
名前：{{student.firstName}}
</v-card-title>
</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
<div class="itemContainer">
</div>
<div class="button">
<nuxt-link to="/">戻る</nuxt-link>
</div>
</v-app>
</template>
<script>
import axios from 'axios';
import { db } from '~/plugins/firebase.js'
import StudentDetail from '~/components/StudentDetail.vue'
import { mapGetters } from 'vuex'
export default {
data() {
return {
firstName :'',
student: []
}
},
components: { StudentDetail },
created () {
const studentId = this.$route.params.id
db.collection('students').doc(studentId).get().then(doc =>{
const student = (doc.id, '=>', doc.data());
})
},
computed: {
...mapGetters({students: 'getStudents' })
},
}
</script>
自分で試したこと
console.log(student.firstName）で生徒の名前はきちんと取れています。
しかし表示させることがうまくいかず困っています。
0 likes