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

Question

我正在从 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 时才显示卡片中的按钮。它们在数据库中设置为 bool 值。如果 true = 显示按钮，否则不显示。感谢您的帮助。

Answer 1

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