Как отобразить одну строку данных из облачного пожарного хранилища, используя vue.js

Question

Я не могу отобразить определенные элементы данных, возвращенные функцией облачного пожарного хранилища, на странице vue.js.Используя ведение журнала, я могу убедиться, что облачная функция вызывается и из нее возвращаются данные.

Я увидел сообщение, которое было похоже на мою потребность.Тем не менее, решение "let _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>

Теперь в браузере я вижу три сообщения console.log, которые показывают, что данные возвращаются из облачной функции.Тем не менее, я все еще не связываю данные с полями ввода правильно.Подскажите, пожалуйста, что мне не хватает? Результаты браузера с выводом журнала консоли В любом случае, отображаемое значение firstName либо пустое, либо независимо от того, что я добавляю в функцию data () для значения по умолчанию (например, firstName: «test»)