Отображение закусочной, если Child добавлен в NodeJS (Vuefire) - PullRequest
Новая
       89

Отображение закусочной, если Child добавлен в NodeJS (Vuefire)

0 голосов
/ 16 июня 2019

Я создаю админ-панель для заказа еды, и я хотел бы отображать снэк-бар или уведомление при добавлении нового ребенка 

  export const newOrder = namesRef.on('child_added', (snapshot) =>{
    var newOrder = snapshot.val();
    console.log(newOrder.name);
    console.log(newOrder.product);
    console.log(newOrder.adress);
    console.log(newOrder.phone);
  });

Я сделал экспорт, но, кажется, я не смог справиться с этим, я могуне проверять новый заказ всякий раз, когда он приходит

Это мой файл Dessets.vue, я в основном использую vuetify для создания дизайна материала 

<template>
  <div>

    <v-layout row >
              <v-flex>
                <v-card pa-3 color="blue-grey darken-3"  v-for="person of names" v-bind:key="person['.key']" class="white--text card">
                  <v-card-title>
                    Order ID
                  </v-card-title>
                  <div>
                      <table >
                        <tr>
                          <th>Guest</th>
                          <th>Title</th>
                          <th>Tel.</th>
                          <th>Address</th>
                          <th>Status</th>
                        </tr>
                      <tr>
                        <td>
                          {{person.name}}
                        </td>
                        <td>
                          {{person.product}}
                        </td>
                        <td>
                          {{person.phone}}
                        </td>
                        <td>
                          {{person.adress}}
                        </td>
                        <td>
                          <v-tooltip right z-index="10">
                             <template v-slot:activator="{ on }">
                              <v-btn icon color="green" v-on="on" @click="snackbar = true" >
                                <v-icon class="white--text">done</v-icon>
                              </v-btn>
                            </template>
                            <span>Complete</span>
                          </v-tooltip>

                            <v-btn icon color="red"
                            @click="deleteOrder('{{person.name}}', '{{person.product}}', '{{person.phone}}', '{{person.adress}}')">
                              <v-icon class="white--text">delete</v-icon>
                            </v-btn>
                        </td>
                      </tr>
                      </table>

                    </div>


                </v-card>
              </v-flex>
            </v-layout>
              <template v-if="newChild">
                <v-snackbar
                    timeout="1500"
                    v-model="snackbar" bottom right color="green darken-2">
                    <v-icon class="white--text">notifications</v-icon>
                    New Order
                    <v-btn
                      color="white"
                      flat
                      icon
                      @click="snackbar = false"
                    >
                      <v-icon>close</v-icon>
                    </v-btn>
                  </v-snackbar>
              </template>

  </div>
</template>

Здесь я не смог передать свою функцию вфайл firebase.js в мой файл component.vue.Моя цель состоит в том, чтобы прослушивать новый заказ в дБ, поэтому, когда бы он ни появлялся, мне нравится показывать снек-бар, уведомляющий о новом клиенте 


<script>
import { namesRef, newOrder } from '../firebase'

export default {
name : "desserts",
data (){
  return {
      headers: [
      {text: '№', sortable: false, align: 'center'},
      {text: 'Client', sortable: false, align: 'left'},
      {text: 'Shop', sortable: false, align: 'center'},
      {text: 'Tel.', sortable: false, align: 'center'},
      {text: 'Address', sortable: false, align: 'center'}
    ],

    snackbar : newOrder.snackbar
  }
},

firebase :{
  names: namesRef

},

methods: {
  submitName(){
    namesRef.push({name: this.name, product: this.product, phone: this.phone, adress: this.adress});
  }
  }

}
</script>
...