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

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;

        })

 }