Используйте V-IF, чтобы показать кнопку только тогда, когда значение из Firestore равно true

Question

Я читаю документы из базы данных пожарного магазина и загружаю их в карточки. Я хочу, чтобы на карте были кнопки, когда значение в загруженном объекте равно true.

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

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

Я использую v-if и созданную функцию и не могу показатьсязаставить его работать любым способом, который я пытаюсь.

Когда я загружаю документы, они помещаются в массив (пользователи), и у меня нет проблем с их чтением.

Я видел много статей в Интернетеи когда я пытаюсь повторить, как они это сделали, ничего не получается. Я использовал просто ie 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 = показать кнопку, иначе не показывать. Спасибо за любую помощь.

Answer 1

Вы не устанавливаете соответствующие данные после получения ответа API. Я думаю, что вы должны установить safety, battery и alarm значение в обратном вызове. как это ..

querySnapshot.forEach(doc => {
      const data = {
        id: doc.id,
        Safety: doc.data().Safety,
        Alarm: doc.data().Alarm,
        Battery: doc.data().Battery,
      };
       this.users.push(data);
       this.safety = doc.data().Safety;
       this.battery = doc.data().Battery;
       this.alarm = doc.data().Alarm;

    });