如何将数据库数据放入数组Vue.js

Question

我在从 Firestore 中检索数据并将其应用为我的数组时做错了什么？ 猜猜我应该至少在控制台中看到对象。方法应该在某个地方调用吗？ 我的方法 created() 正在工作，但只有当我通过 @click 处理事件时 - 然后我的数组才会更新（从数据库添加）并且还会显示在控制台中。 我已经阅读了 firebase 的文档，结果是一样的。 几天前我刚开始使用 vue.js。 这是我的代码：

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

火力基地

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

Answer 1

你把 created() 放在了错误的地方。生命周期钩子应该放在根选项对象中。方法基本上只是作为属性的函数。

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