[Vuejs]-How to display Firebase array items in Vue.js

by

0👍

✅

OK this is what I was ultimately trying to accomplish. I reconfigured the addInput method to push inputted data as objects into the array. I then added a second loop two the template, which iterates through the items in the array user.events and returns them as list items. This worked! See below:

Template

<v-list class="elevation-1">
  <v-list-tile-content>
    <v-list-tile v-for="user in this.$store.getters.getUsers" :key="user.id">
      <v-list-tile v-for="newUser in user.events">
        {{ newUser.name }}
      </v-list-tile>
    </v-list-tile>
  </v-list-tile-content>
</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({
        'name': finalInput
      })
    })
  })
})
.catch(function(error) {
  console.log("Error getting documents: ", error);
});
}

0👍

The v-for attribute should be declared inside the item elements, not the containing element. To achieve this, move the v-for into the list item element like so:

<v-list class="elevation-1">
  <v-list-tile-content v-for="user in this.$store.getters.getUsers" :key="user.id">
    <v-list-tile v-for="event in user.events">
      {{ event }}
    </v-list-tile>
  </v-list-tile-content>
</v-list>

Leave a comment