如何通过Vue.js搜索功能调用Firebase数据
问题描述 投票：-1回答：1
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 © 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模型（应该定义搜索），我仍然得到相同的错误......我做错了什么？
1个回答
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 © 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>最新问题
- Visual Studio Code Remote - 容器 - 更改 shell
- 如何用python获取准确的进程CPU和内存使用情况？
- 无法从 Windows 主机针对在我的 WSL2 上的 Docker 容器中运行的 Redis 服务器运行 Redis 命令
- 如何使用ggplot2绘制12条水平线，每条线有3个值？
- 将内容选项卡容器拉伸至 100%
- 将 pandas 数据框写入 Excel 消耗太多内存
- 返回用户自定义函数的问题（从头学R）
- Typescript 在其他文件中导入接口会抛出错误
- 从初始化程序中非法引用静态字段
- 如何正确修改android x86 system.img（2023）？
- 根据条件进行不同计数
- Expo CameraView 无法扫描条形码
- 调试时如何将 Visual Studio HTTPS 服务器放入托盘图标
- 以编程方式刷新系统托盘图标
- 如何使用Python删除csv文件中逗号前后的空格？
- 使用 8051 的高温警报
- 此处应用的确切编译器优化（除了尾递归消除之外）是什么？
- 带有添加按钮的TabControl
- sink writer在成功1-3次后总是停止或出错？
- 使用四边形提高积分精度
© www.soinside.com 2019 - 2024. All rights reserved.