Vuefire从数据中获取值

时间:2017-10-31 08:46:04

标签: firebase firebase-realtime-database vue.js vuefire

我在Firebase DB上有这个:

enter image description here

我想得到id的值,我尝试了很多东西,但我无法得到它:((有些东西我不懂这个DB我觉得哈哈x)

在我的程序中,我希望获取id的值,将id放入产品中,然后增加id。

我这样做(在postProduct方法中):

<template>
    <form>
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--8-col">
                <div class="card-image__picture">
                </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded is-dirty">
                    <input id="linkIMG" v-model="product.linkIMG" type="text" class="mdl-textfield__input"/>
                    <label for="linkIMG" class="mdl-textfield__label">Picture URL</label>
                    <input id="name" v-model="product.name" type="text" class="mdl-textfield__input"/>
                    <label for="name" class="mdl-textfield__label">Product Name</label>
                    <input id="brand" v-model="product.brand" type="text" class="mdl-textfield__input"/>
                    <label for="brand" class="mdl-textfield__label">Product Name</label>
                    <input id="description" v-model="product.description" type="text" class="mdl-textfield__input"/>
                    <label for="description" class="mdl-textfield__label">Product Description</label>
                    <input id="price" v-model="product.price" type="number" class="mdl-textfield__input"/>
                    <label for="price" class="mdl-textfield__label">Price of the Product</label>
                    <input id="category" v-model="product.category" type="number" class="mdl-textfield__input"/>
                    <label for="category" class="mdl-textfield__label">Categ of product</label>
                </div>
                <div class="actions">
                    <a @click.prevent="postProduct" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                        POST A PRODUCT
                    </a>
                </div>
            </div>
        </div>
    </form>
</template>

<script>
import FireBase from '../service/firebase'

    export default {
        data() {
            return {
                product: {
                    linkIMG: "",
                    category: 0,
                    brand: "",
                    name: "",
                    description: "",
                    price: 0,
                    id: 0
                }
            }
        },
        firebase: {
            ref: FireBase.database.ref('id')
        },
        methods: {
            postProduct: function() {
                var todoId = FireBase.database.ref('id') ;
                // Set l'id of product to id
                this.product.id = todoId;
                console.log(todoId);
                // Up id + 1
                todoId.set(todoId + 1);
                this.$root.$firebaseRefs.product.push(this.product)
                    .then(this.$router.push('/'));
                this.$router.push({name: 'Catalog'});
            }

        }
    }
</script>

非常感谢你:))

0 个答案:

没有答案