如何在 Vue.js 中显示 Firebase 数组项

Question

我正在构建一个 Vue.js 应用程序，它使用户能够将项目添加到已在 Firebase 文档中设置的数组中。将项目添加到数据库中的数组的函数工作正常。我想将数组中的项目作为屏幕上的列表项目返回。然而，目前整个数组容器返回到屏幕。如何重新设置样式，以便数组项在没有容器的情况下很好地呈现为列表项？最好使用 Vuetify。谢谢！

模板

<v-list class="elevation-1">

  <v-list-tile-content v-for="user in this.$store.getters.getUsers" :key="user.id" >

    <v-list-tile>

      {{ user.events }}

    </v-list-tile>

  </v-list-tile-content>

</v-list>

方法

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

      });

    }