How to put database data into the array Vue.js

Question

What im doing wrong to retrieving data from firestore and apply it as my array? Guess I should atleast see objects in console. Should method be somewhere called? My method created() is working, but only if i handle event by @click - then my array is updated(added from database) and also shows in console. Ive read documentation from firebase and result is same. I just started vue.js a couple days ago. Here is my code:

<template>
    <div class="index container">
        <div class="card" v-for="smoothie in smoothies" :key="smoothie.id">
            <div class="card-content">
                <i class="material-icons delete" @click="deleteSmoothie(smoothie.id)">delete</i>
                <!--                                <i class="material-icons delete" @click="created()">delete</i>-->
                <h2 class="indigo-text">{{smoothie.title}}</h2>
                <ul class="ingredients">
                    <li v-for="(ing, index) in smoothie.ingredients" :key="index">
                        <span class="chip">{{ing}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import db from '@/firebase/init.js'

    export default {
        name: 'Index',
        data() {
            return {
                smoothies: [
                    // {title: 'Banana shake', slug: 'banana-shake', ingredients: ['banans', 'granats'], id: 1},
                    // {title: 'Morning brew', slug: 'morning-brew', ingredients: ['banans', 'orange'], id: 2},
                ]
            }
        },
        methods: {
            deleteSmoothie(id) {
                this.smoothies = this.smoothies.filter(smoothie => {
                    return smoothie.id != id
                })
            },
            created() {
                db.collection('smoothies').get()
                    .then(snapshot => {
                        snapshot.forEach(doc => {
                            console.log(doc.data())
                            let smoothie = doc.data()
                            smoothie.id = doc.id
                            this.smoothies.push(smoothie)

                        })
                    })
            }
        }
    }
</script>

firebase

import * as firebase from "firebase/app";

import "firebase/analytics";

import "firebase/auth";
import "firebase/firestore";


const firebaseConfig = {
    ...
};

const firebaseApp = firebase.initializeApp(firebaseConfig)

export default firebaseApp.firestore()

Please check the edit I made, as the triple backticks needs to be on their own line for them to work correctly here on Stack Overflow. — Frank van Puffelen
– Frank van Puffelen, Commented Apr 13, 2020 at 0:31

user120242 · Accepted Answer · 2020-04-13 02:25:15Z

You put created() in the wrong place. Lifecycle hooks should go in the root options object. methods are basically just functions as properties.

    export default {
        name: 'Index',
        data() {
            return {
                smoothies: [
                    // {title: 'Banana shake', slug: 'banana-shake', ingredients: ['banans', 'granats'], id: 1},
                    // {title: 'Morning brew', slug: 'morning-brew', ingredients: ['banans', 'orange'], id: 2},
                ]
            }
        },
        created() {
                db.collection('smoothies').get()
                    .then(snapshot => {
                        snapshot.forEach(doc => {
                            console.log(doc.data())
                            let smoothie = doc.data()
                            smoothie.id = doc.id
                            this.smoothies.push(smoothie)

                        })
                    })
        },
        methods: {
            deleteSmoothie(id) {
                this.smoothies = this.smoothies.filter(smoothie => {
                    return smoothie.id != id
                })
            }
        }
    }

Collectives™ on Stack Overflow

How to put database data into the array Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related