javascript - 仅当 Firestore 中的值为 true 时才使用 V-IF 显示按钮

问题描述

我正在从 firestore 数据库中读取文档并将它们加载到卡片中。当加载的对象中的值为真时，我希望卡片包含按钮。

{ "Alarm": false, "Safety": true, "Battery": true }.

所以对于这个例子，我想加载一个电池按钮和一个安全按钮，而不是一个警报按钮。

我正在使用 v-if 和创建的函数，但似乎无法以任何我尝试的方式工作。

当我加载文档时，它们会被放入一个数组（用户）中，我可以毫无问题地阅读它们。

我在网上看过很多文章，当我尝试复制他们的做法时，没有任何效果。我只使用了一个 ie v-if=(users.Alarm)，我尝试使用一个 created 函数和两者的一些变体。

 <v-card  class="mx-4 grey darken-4" v-for="user in users" :key="user.id">

     <v-footer flat height="35px"  color="black"> 
       <v-btn class="green--text mx-1" x-small v-if="safety">Safety</v-btn> 

       <v-btn class="red--text mx-1" x-small v-if="alarm">Alarm</v-btn> 

       <v-btn class="yellow--text mx-1" x-small v-if="battery">Battery</v-btn> 

     </v-footer>
     <v-divider></v-divider>
</v-card>

export default {
  components: {  },
  data() {

    return {
      safety: false,
      battery: false,
      alarm: false,
      users: [],
    };
  },

  created() { 
    if (users.Safety) {
       this.check = true;

   }},
// here goes the other buttons once I get one working


   var user = firebase.auth().currentUser;
   var SuperUser = user.uid + "3329"

    db.collection(SuperUser)

      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          const data = {

            id: doc.id,
            Safety: doc.data().Safety,
            Alarm: doc.data().Alarm,
            Battery: doc.data().Battery,

          };

          this.users.push(data);
        });
      })
     }
    };

我只想在它们的值为真时显示卡片中的按钮。它们在数据库中设置为布尔值。如果 true = 显示按钮，则不显示。谢谢你的帮助。

标签： javascriptarraysif-statementvue.jsgoogle-cloud-firestore

javascript - 仅当 Firestore 中的值为 true 时才使用 V-IF 显示按钮

问题描述

解决方案

推荐阅读