Question

我在Vue JS和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>

说实话，这真的很令人沮丧，因为我能够在控制台上登录数据库的字段，但无法将它们链接到我的“可用”计算属性。我浏览了很多帖子和firestore文档，但找不到有效的方法。

提前谢谢！

Vue JS + Firestore-将计算属性链接到单个文档字段

0 个答案: