firebase - Vue js 仅循环通过 firebase 数据库中的一个元素

Question

我正在使用从数据库中获取数据

setMovies(state){

            let items = [];

            db.collection('movies').onSnapshot((snapshot) => {
                items = [];

                snapshot.docs.forEach((doc)=>{
                    // eslint-disable-next-line no-console
                    console.log(doc.data())
                    items = doc.data()
                });

                state.movies = items;

            })

        }

正在显示使用的项目

<div  v-for="item in items" :key="item">
        {{ item }}<br /><br /><small >Delete</small>
        <hr />
      </div>

computed:{
      items(){
        return this.$store.getters.getMovies
      },

但在显示时它只显示一个元素但在控制台上我可以看到 3

标签： firebasevue.jsgoogle-cloud-firestore

Answer 1

在您的每次迭代中，用;forEach()覆盖items变量doc.data()

使用以下push()方法应该可以解决问题：

setMovies(state){

        let items = [];

        db.collection('movies').onSnapshot((snapshot) => {

            snapshot.docs.forEach((doc)=>{
                // eslint-disable-next-line no-console
                console.log(doc.data())
                items.push(doc.data())
            });

            state.movies = items;

        })

 }