Vue JS + Firestore - связывает вычисляемое свойство с одним полем документа

Question

Я довольно новичок в Vue JS и dbs, как Firebase, и у меня возникли некоторые проблемы с тем, что я хотел бы сделать.

Вот идея: у меня есть повторяющиеся компоненты (' LaundryMachine.vue '), каждый из которых имеет логическое свойство (вычисляемое свойство) доступно .

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

Я смог связать код VueJS и базу данных и отредактировать данные базы данных в приложении.Однако я не смог прочитать данные из БД.

Точнее, , мне удалось только прочитать данные из одного или нескольких документов БД и записать их наприставка.Но мне не удается связать данные со свойствами.

Вот что у меня есть на LaundryMachine.vue:

<template>
  <div class="about">
    <h2>Machine {{ this.machineNum }}</h2>
    <img src="../assets/washing_machine.png" /><br />
    <v-btn v-bind:color="buttonColor" v-on:click="changeAvailability">
      {{ this.availability }}</v-btn
    >
    <v-btn v-bind:color="buttonColor" v-on:click="editState">Edit state</v-btn>
  </div>
</template>

<script>
  import db from './firebaseInit.js';

  export default {
    name: 'LaundryMachine',
    props: {
      name: String,
      machineNum: Number,
      residenceNum: Number,
    },
    methods: {
      editState: function(event) {
        console.log('available:' + this.available);

        // Emit to parent component which succesfully edits the fields in the DB
        this.$emit('update-availability', this.machineNum, this.residenceNum);

        // This part is just about logging out on the console the db documents data which works fine

        db.collection('Machines')
          .get()
          .then(querySnapshot => {
            querySnapshot.forEach(doc => {
              console.log(doc.id + doc.data() + doc.data().available);
            });
          });
      }
    },
    computed: {
      available: function() {

        // This is where I want to link my computed property to the db document field but which doesn't work. If i print {{this.available}}, i'll get an undefined

        let ref = db
          .collection('Machines')
          .doc('machine' + this.residenceNum + this.machineNum);
        ref.get().then(snapshot => {
          if (snapshot.exists) {
            ref.get().then(snapshot => {
              return snapshot.data().available;
            });
          } else {
            return true;
          }
        });
      },
      availability: function() {
        if (this.available) {
          return 'disponible';
        } else {
          return 'indisponible';
        }
      },
      buttonColor: function() {
        if (this.available) {
          return 'primary';
        } else {
          return 'red';
        }
      }
    }
  };
</script>

Это, честно говоря, очень расстраивает, так как я могувойдите в консоль с полями базы данных, но я не могу связать их с моим «доступным» вычисляемым свойством.Я просмотрел множество постов и документацию по пожарному магазину и не могу найти что-то, что работает.

Заранее спасибо!