我正在从Firestore数据库中读取文档,并将其加载到卡中。我希望卡片在加载的对象中的值为true时包含按钮。

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


因此,在此示例中,我想加载电池按钮和安全按钮,但不加载警报按钮。

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

当我加载文档时,它们被放入一个数组(用户)中,并且阅读它们没有问题。

我在网上看到了许多文章,当我尝试复制它们的工作方式时,没有任何效果。我只使用了v-if=(users.Alarm),并且尝试使用创建的函数和两者的一些变化。

 <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 =显示按钮,则其他按钮不显示。谢谢你的帮助。

最佳答案

答案很简单,我只是犯了一个小错误,我使用的是users.Alarm而不是user.Alarm。从v-for。感谢您的回答,尽管它可以帮助我弄清楚我做错了什么。道歉!

10-05 20:54
查看更多