如果在NodeJS（Vuefire）中添加了子级，则显示小吃栏

Question

我正在创建食品订单管理面板，我想在添加新孩子时显示小吃店或通知

  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文件中。我的目的是在db中侦听新订单，因此每当有新消息时，我都希望显示小吃店通知新客户

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