我无法在vue.js页面上显示从Cloud Firestore函数返回的特定数据元素。使用日志记录，我可以验证是否正在调用云函数，并且正在从中返回数据。
我看到了一篇与我的需求相似的帖子。但是，解决方案“让_this = this”已经是我一直在尝试的东西。我已经在b表标签中成功完成了此操作。对于单行数据，我尚未成功完成此操作（在这种情况下，这将是“个人资料”页面，用户可以在其中编辑其个人资料）。
我尝试分配单个字段（例如this.lastName）以及对象（例如this.user = user，然后分配v-model =“ user.lastName”）。
<template>
<LoadingScreen v-if="isLoading" />
<div v-else>
<div id="profileContainer">
<div class="profileSection">
<h4>Last name</h4>
<b-form-input v-model="lastName" type="text" class="profileItem"/>
</div>
</div>
</div>
</template>
data() {
return {
API: API,
isLoading: false,
firstName: "test",
lastName: "",
user: [],
errorMessage: "",
shouldShowError: false
}
},
setup() {
let self = this;
**console.log("In Setup", this);**
self.isLoading = true;
API.getCurrentUser()
.then(user => {
**console.log("results:", user.lastName);**
self.isLoading = false;
self.firstName = user.firstName;
self.lastName = user.lastName;
self.user = user;
});
}
这是对云功能的调用
export default {
getCurrentUser() {
var queryUser = Firebase.functions().httpsCallable('me');
return queryUser().then(result => {
**console.log("returnedData: ", result.data);**
return result.data;
});
};
};
这是调用个人资料页面的页面
<template>
<b-card id="dashboardContainer" no-body>
<b-tabs card v-on:input="tabBecameVisible">
<b-tab title="Matches">
<MentorMatchChart ref="matchChart" />
</b-tab>
<b-tab title="My profile">
<MentorProfile ref="profileChart"/>
</b-tab>
</b-tabs>
</b-card>
</template>
<script>
// import API from "../../API.js";
import LoadingScreen from "../../components/LoadingScreen";
import MentorProfile from "./Profile";
import MentorMatchChart from "./Matches";
export default {
name: "MentorDashboard",
components: {LoadingScreen
, MentorMatchChart
, MentorProfile
},
methods: {
tabBecameVisible(index) {
switch(index) {
case 0: this.$refs.matchChart.setup();
break;
case 1:
// this.$refs.profileChart.setup();
MentorProfile.setup();
default: break;
}
}
}
}
</script>
