使用Firebase在Vue.js中搜索和编辑-需要示例

Question

我一直在从事一个个人项目，以尝试学习如何将Vue.js与Firebase Realtime Database一起使用。我看了无数的教程，并阅读了所有可以掌握的文档。

到目前为止，我已经了解了如何连接到dbase，如何向数据库中添加数据以及如何搜索和建立网格。我被困在如何“搜索和编辑”记录上。任何指导将不胜感激。我将使用gris和main.js发布该页面。我以身作则，所以任何帮助将不胜感激！

这是我的搜索网格：

<template>
<div id="app" class="container">
 <input 
type="text" 
name="name" 
placeholder="Type First Name to Search Here"
size = "30"
v-model="search"
v-on:keyup.enter="searchName" />
<br><br>

<div class="panel panel-default">
  <div class="panel-heading">

 </div>
 <div class="panel-body">
   <!-- <vue-good-table
  :columns="columns"
  :rows="rows"/> -->

  <table class="table table-striped">
    <thead>
      <tr>
        <th>
        ID
        </th>
        <th>
        First Name
        </th>
        <th>
        Last Name
        </th>
                    <th>
        Phone Number
        </th>
                    <th>
        Email
        </th>
        <th>
        Teacher
        </th>
                    <th>
        Grade
        </th>
                    <th>
        Agreement 1
        </th>
                    <th>
        Agreement 2
        </th>
                    <th>
        Paid
        </th>





      </tr>

    </thead>

    <tbody>
      <tr v-for="waiver in waivers" :key="waiver.key">
        <td>
  {{ waiver[0] }} 
        </td>
        <td>
  { waiver[2] }} 
        </td>
        <td>
 {{ waiver[3] }} 
        </td>
                    <td>
  {{ waiver[10] }} 
        </td>
        <td>
  {{ waiver[5] }} 
        </td>
        <td>
  {{ waiver[6] }} 
        </td>
                    <td>
  {{ waiver[7] }} 
        </td>
        <td>
  {{ waiver[8] }} 
        </td>
        <td>
  {{ waiver[9] }} 
        </td>
         <td>
  {{ waiver[11] }} 
        </td>

      </tr>
    </tbody>
    </table>
      </div>
    </div>
  </div>
 </template>


<script>
import HelloWorld from './components/HelloWorld'

import Firebase from 'firebase'

let config = {
apiKey: "xxxxxxx",
authDomain: "xxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxx.firebaseio.com",
projectId: "xxx",
storageBucket: "xxxxx.appspot.com",
messagingSenderId: "xxxxxxx"
}

let app = Firebase.initializeApp(config);
let db = app.database();


export default {
name: 'app',
firebase: {
waivers: db.ref('masterSheet')
 },

data() {
return {
  columns: [
  ],
  rows: this.getWaivers,
  search:""
}
},
getWaivers() {
 return {
}
},

methods: {
 searchName: function() {
let data = [];
return db.ref('masterSheet').once('value').then(result => {
this.waivers = [];
result.forEach(snap => {
data.push(snap.val());
  if (snap.val()['2'] == this.search){
    this.waivers.push(snap.val());
  } 
})
if ( this.waivers.length == 0 ){
  this.waivers = data;
}
})
.catch(err => console.log(err))
},

}
}
 </script>

 <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
 color: #2c3e50;
 margin-top: 60px; 
  }
 input[type="text"] { border: 1px solid #d66 }

 </style>

这是我的main.js文件：

    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with 
an alias.
import Vue from 'vue'
import VueRouter from 'vue-router';
import Users from './Users.vue';
import Home from './Home.vue';
import Edit from './Edit.vue';
import List from './List.vue';
import Add from './Add.vue';

import VueFire from 'vuefire'

// import VueGoodTablePlugin from 'vue-good-table'

import App from './App'

//import 'vue-good-table/dist/vue-good-table.css'


 Vue.use(VueFire)
 // Vue.use(VueGoodTablePlugin)
 Vue.use(VueRouter);

const routes = [
{path: '/users', component: Users },
{path: '/', component: Home },
{path: '/edit', component: Edit, props: false },
{path: '/add', component: Add },
 {path: '/list/:ransum', component: List },
];

const router = new VueRouter ({
routes,
mode: 'history'
});

/* eslint-disable no-new */
new Vue({
el: '#app',
router, 
components: { App },
template: '<App/>'
    })