Vue にてfirebase(cloudFirestore)を使い自作のアプリケーション作成を勉強しております。
添付のGIFの通り、なぜか、コードを少しずらすと（更新??）されて、
データが格納されますがUserinfoを表示させた時は、なぜかデータが格納されません。
お詳しい方ご教示頂けると幸いです。
ちなみにcompanyidは、app.vueから送られてきているプロパティで,
Userinfo.vueは viewsフォルダの中に格納されております。
--App.vue--------------------------------------------------------------------
<template>
<div id="app" v-cloak>
//ここで companyid を送っている
<router-view :companyid ="user.companyid"/>
</div>
</template>
<script>
import firebase from 'firebase'
import HelloWorld from '@/components/HelloWorld.vue'
import { auth } from './main' // mainからauthをインポートする
import { db } from './main' // ここを追加
import Home from './views/Home'
import 'vue-good-table/dist/vue-good-table.css'
import moment from 'moment'
import PulseLoader from "vue-spinner/src/PulseLoader";
export default {
name: 'App',
data() {
return {
currentUser: {},
user: {},
loading: true,
};
},
created() {
auth.onAuthStateChanged(user => {
this.currentUser = user;
})
},
//ここでUserを取得している
firestore() {
return {
user: db.collection("users").doc(this.$route.params.uid),
}
}
}
-----Userinfo.vue---------------------------------------------------------------------
<template>
<div class="Userinfo"></div>
</template>
<script>
// ここを追加
import { db } from "../main";
import { auth } from "../main";
import Vue2Filters from "vue2-filters";
import firebase from "firebase"; // ここを追加
import { VueGoodTable } from "vue-good-table";
import Router from "vue-router";
import "vue-good-table/dist/vue-good-table.css";
export default {
name: "Userinfo",
components: {
VueGoodTable,
},
props: ["companyid"],
data: function () {
return {
userinfocom: [],
shinsei: [],
yatto: [],
ssss: [],
ssss2: [],
};
},
firestore() {
return{
//☆☆↓↓↓ここが原因と思っております
ssss2:db.collection("users").where("companyid","==", this.$props.companyid)
}
},
created() {
auth.onAuthStateChanged((user) => {
this.currentUser = user;
});
},
mounted() {
this.firestore
}
};
</script>
Q&A
