如何通过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>[email protected] |</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>[email protected] |</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>