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

Posted

技术标签:

【中文标题】如何在 Vue.js 中显示 Firebase 数组项【英文标题】:How to display Firebase array items in Vue.js 【发布时间】:2020-01-08 19:29:39 【问题描述】:

我正在构建一个 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);
      );
    

【问题讨论】:

【参考方案1】:

好的,这就是我最终想要实现的目标。我重新配置了 addInput 方法,将输入的数据作为对象推送到数组中。然后我添加了第二个循环两个模板,它遍历数组 user.events 中的项目并将它们作为列表项返回。这行得通!见下文:

模板

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

方法

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

【讨论】:

【参考方案2】:

v-for 属性应该在 item 元素中声明,而不是在包含元素中。为此,请将v-for 移动到列表项元素中,如下所示:

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

【讨论】:

感谢您的反馈。不幸的是,这并没有奏效。数组中的项是“事件”的子项。有什么我需要添加到 user.events 以使 for 循环遍历数组项而不是整个数组吗? @JS_is_awesome18 这对您正在寻找的东西有用吗?循环遍历每个用户以创建他们的事件列表? 是的,我已经知道了,但感谢您的入住。非常感谢!

以上是关于如何在 Vue.js 中显示 Firebase 数组项的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vue js 中显示从 firebase 检索到的标题标签 <h1> </h1> 的数据?

构建后如何在 Vue.js 项目中存储 Firebase 凭据(env_var)

如何从 Firebase 存储中删除 Vue.js 组件图像?

Vue.js:从 Firebase 存储中检索数据后如何异步加载模板?

如何在vue js项目中检测用户的firebase身份验证登录状态?

如何使用 Vue.js Firebase UID 删除用户