I am fetching data from my Firestore database and displaying them on cards. I want to add buttons to the card only if a specific value in the loaded object is true.
{ "Alarm": false, "Safety": true, "Battery": true }.For example, if the values are as above, I would like to display a safety button and a battery button but not an alarm button.
I have tried using v-if and a created function, but I'm unable to make it work no matter what approach I take.
The documents are stored in an array called users after being fetched, and reading them poses no issues.
Despite referencing several online resources and attempting different methods such as v-if=(users.Alarm) or using a combination of a created function and v-if, nothing seems to be effective in implementing the desired functionality.
<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;
}},
// other buttons will go here 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 display the buttons on the card only when their respective values are true, which are boolean values stored in the database. If true, show the button; otherwise, hide it. Any assistance in achieving this feature would be greatly appreciated. Thank you.