如何通過Vue.js搜索功能調用Firebase數據

Question

 Vue.component('search', { template: '\\ <form class="form-inline">\\ <div class="input-group input-group-lg"">\\ <input v-model="search" class="form-control py-2 border-right-0 border" type="search" id="example-search-input" placeholder="Search your craves">\\ <span class="input-group-append">\\ <div class="input-group-text bg-transparent">\\ <i class="fa fa-search" @click="searchButton()" style="cursor:pointer"></i>\\ </div>\\ </span>\\ </div>\\ </form>' }); var search = new Vue({ el: "#searchFunc", data: { allSearch: [], search: "" }, methods: { async searchButton() { var search = await firestore.collection('koreanbap-cuisines'); var query = await search.where("food_name", "==", "Pancake").get(); // do exactly like getall var arr = []; query.forEach((docs) => { var obj = docs.data(); arr.push(obj); console.log(obj); }) this.allSearch = arr; console.log(this.allSearch); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="searchFunc"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top pb-3"> <div class="container-fluid"> <a class="navbar-brand" href="index.html"> <img src="https://firebasestorage.googleapis.com/v0/b/koreanban-2019.appspot.com/o/logo_images%2Flogo.svg?alt=media&token=75a8ef65-e3ee-4b57-b233-05c677853dee" width="150px"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item pt-3 px-3 d-md-flex justify-content-center"> <search></search> </li> <li class="nav-item px-4"> <a href="index.html" class="nav-link text-sm-center text-lg-center text-md-center"> <span> <img src="assets/icons/icon - home.png" class="m-3 mx-md-auto d-lg-block d-md-block d-sm-block"> </span>Home </a> </li> <li class="nav-item px-4"> <a href="cuisuine.html" class="nav-link text-sm-center text-lg-center text-md-center"> <span> <img src="assets/icons/icon%20-%20cuisuine.png" class="m-3 mx-md-auto d-lg-block d-md-block"> </span>Cuisine </a> </li> <li class="nav-item px-4"> <a href="suggestion.html" class="nav-link text-sm-center text-lg-center text-md-center"> <span> <img src="assets/icons/icon - Suggestion.png" class="m-3 mx-md-auto d-md-block d-lg-block"> </span>Suggestion </a> </li> <li class="nav-item px-4"> <a href="admin.html" class="nav-link text-sm-center text-lg-center text-md-center"> <span> <img src="assets/icons/icon - Contact.png" class="m-3 mx-md-auto d-md-block d-lg-block"> </span>Admin Login </a> </li> </ul> </div> </div> </nav> </div> <!-- Search Result --> <div id="searchFunc" v-for="s in allSearch"> <div v-bind:obj="allSearch"> {{s.food_name}} </div> </div> <!-- Footer --> <footer class="p-3"> <div class="container-fluid"> <div class="row"> <div class="col-lg-6 text-center"> <p>Copyright &copy; 2019 Korean Bop</p> </div> <div class="col-lg-6 text-center"> <i class='fas fa-envelope fa-md'></i> <span>KoreanBop@gmail.com |</span> <i class="fa fa-phone fa-md"></i> <span>778-836-2243</span> </div> </div> </div> </footer> 

我需要使用Vue.js進行搜索的幫助。 我需要搜索存儲在Firebase數據庫中的美食標題。

這是我的搜索功能所在的頁面

這是使用搜索功能的地方。 單擊事件將觸發該功能，以顯示美食名稱。

這是顯示結果的地方。

當前，當我單擊按鈕時，出現這兩個錯誤。

我不知道如何解決這些錯誤，也不知道從哪里開始。 任何類型的幫助將不勝感激。 謝謝。

更新

所以我將searchButton函數更改為

我在搜索輸入（應該定義搜索）中有我的v模型，仍然出現相同的錯誤...我在做什么錯？

Answer 1

更改：

methods:{
  searchButton: async function (){
         ...
   }
 }

與：

methods:{
  async searchButton(){
     ...
    }
}

我認為您需要再次閱讀vue js文檔。 在我的示例中，您僅需要更新Firebase配置。

這是您的代碼需要查看的小時：

 Vue.component('search-form', { data: function() { return { search: null, } }, methods: { async searchButton() { let query = await firestore.collection('koreanbap-cuisines').where("food_name", "==", "Pancake").get(); query.forEach((docs) => { this.allSearch.push(docs.data()); }); console.log(this.allSearch); } }, template: '\\ <form class="form-inline">\\ <div class="input-group input-group-lg"">\\ <input class="form-control py-2 border-right-0 border" v-model="search" type="text" placeholder="Search your craves">\\ <span class="input-group-append">\\ <div class="input-group-text bg-transparent">\\ <i class="fa fa-search" @click="searchButton()" style="cursor:pointer"></i>\\ </div>\\ </span>\\ </div>\\ </form>' }); let app = new Vue({ el: "#app", data: { allSearch: [], }, }); 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div id="app"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top pb-3"> <div class="container-fluid"> <a class="navbar-brand" href="index.html"> <img src="https://firebasestorage.googleapis.com/v0/b/koreanban-2019.appspot.com/o/logo_images%2Flogo.svg?alt=media&token=75a8ef65-e3ee-4b57-b233-05c677853dee" width="150px"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item pt-3 px-3 d-md-flex justify-content-center"> <search-form></search-form> </li> <li class="nav-item px-4"> <a href="index.html" class="nav-link text-sm-center text-lg-center text-md-center"> <span> <img src="assets/icons/icon - home.png" class="m-3 mx-md-auto d-lg-block d-md-block d-sm-block"> </span>Home </a> </li> <li class="nav-item px-4"> <a href="cuisuine.html" class="nav-link text-sm-center text-lg-center text-md-center"> <span> <img src="assets/icons/icon%20-%20cuisuine.png" class="m-3 mx-md-auto d-lg-block d-md-block"> </span>Cuisine </a> </li> <li class="nav-item px-4"> <a href="suggestion.html" class="nav-link text-sm-center text-lg-center text-md-center"> <span> <img src="assets/icons/icon - Suggestion.png" class="m-3 mx-md-auto d-md-block d-lg-block"> </span>Suggestion </a> </li> <li class="nav-item px-4"> <a href="admin.html" class="nav-link text-sm-center text-lg-center text-md-center"> <span> <img src="assets/icons/icon - Contact.png" class="m-3 mx-md-auto d-md-block d-lg-block"> </span>Admin Login </a> </li> </ul> </div> </div> </nav> <div v-for="s in allSearch"> {{s.food_name}} </div> <footer class="p-3"> <div class="container-fluid"> <div class="row"> <div class="col-lg-6 text-center"> <p>Copyright &copy; 2019 Korean Bop</p> </div> <div class="col-lg-6 text-center"> <i class='fas fa-envelope fa-md'></i> <span>KoreanBop@gmail.com |</span> <i class="fa fa-phone fa-md"></i> <span>778-836-2243</span> </div> </div> </div> </footer> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>