mercredi 2 octobre 2019

Use V-IF to show button only when a value from Firestore is true

I am reading documents from firestore database and loading them into cards. I want the card to include buttons when a value in the object loaded is true.

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

So for this example I would like to load a battery button and a safety button but not an alarm button.

I am using v-if and a created function and cannot seem to get it working any way that I try.

When I load the documents they get put into an array (users) and I have no problem reading them.

I have seen many articles online and when I try and replicate how they did it, nothing works. I used just a i.e. v-if=(users.Alarm) and I have tried using a created function and a few variations of the two.


     <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);
        });
      })
     }
    }; 

I want to only show the buttons in the card when their values are true. They are set to Boolean in the database. If true = show button else don't show. Thanks for any help.

Aucun commentaire:

Enregistrer un commentaire