I have developed a Vue.js application that allows users to add items to an array stored in a Firebase document. The function responsible for adding items to the array in the database is functioning correctly. However, I am facing an issue where the entire array container is being displayed on the screen instead of rendering the individual items as list items. I am looking for a solution to style this in a way that the array items are neatly displayed as list items without the container. It would be great if I could achieve this using Vuetify. Thank you!
Template
<v-list class="elevation-1">
<v-list-tile v-for="user in this.$store.getters.getUsers" :key="user.id" >
<v-list-tile-content>
{{ user.events }}
</v-list-tile-content>
</v-list-tile>
</v-list>
Method
async addInput () {
let finalInput = this.newInput
let ref = await db.collection('users').where('user_id', '==', firebase.auth().currentUser.uid)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
doc.ref.update({'events': firebase.firestore.FieldValue.arrayUnion(finalInput)})
})
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
}