Как поместить данные базы данных в массив Vue. js - PullRequest
Новая
       36

Как поместить данные базы данных в массив Vue. js

0 голосов
/ 13 апреля 2020

Что я делаю не так, чтобы получить данные из хранилища и применить их в качестве массива? Думаю, я должен хотя бы увидеть объекты в консоли. Должен ли метод где-то вызываться? Мой метод create () работает, но только если я обработаю событие с помощью @click - тогда мой массив обновляется (добавляется из базы данных) и также отображается в консоли. Я прочитал документацию от Firebase и результат тот же. Я только начал vue. js пару дней go. Вот мой код: 

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

1 Ответ

2 голосов
/ 13 апреля 2020

Вы положили созданный () в неправильном месте. Хуки жизненного цикла должны go в объекте опций root. методы в основном просто функции как свойства. 

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