Javascript 如何仅在使用vue js键入搜索时显示搜索结果

我正在使用vue js创建搜索过滤器，我当前的问题是，我想在创建页面时显示

recentSearch

历史记录中的数据，或者不显示

recentSearch

中的所有json数据，然后当我开始键入时，它将从

searchProduct

中检索过滤器数据

searchProduct.php中的我的json格式

{"result" : [
    { product_name: 'mike', business_name: 'student' },
    { product_name: 'beckham john', business_name: 'footballer' },
    { product_name: 'walcott', business_name: 'footballer' },
    { product_name: 'cech', business_name: 'footballer' },
    { product_name: 'jordan', business_name: 'actor' },
    { product_name: 'tom', business_name: 'actor' },
    { product_name: 'john', business_name: 'actor' }
],
"recent" : [
    { product_name: 'mike', business_name: 'student' },
    { product_name: 'beckham john', business_name: 'footballer' },
    { product_name: 'walcott', business_name: 'footballer' }
]}

Html示例

<div id="SearchVueContenPage">
<input type="search" v-model="q" name="q"/>
    <ul>
        <li v-for="row in filterSearchs" >{{row.product_name}}</li>
    </ul>
</div>

您可以在计算属性中使用
filter
，仅返回与搜索查询匹配的项目，并使用条件语句测试搜索框中是否输入了任何内容，如果没有，则返回最近的搜索结果


const数据={
“结果”：[{
产品名称：“mike”，
企业名称：“学生”
},
{
产品名称：“贝克汉姆·约翰”，
商业名称：“足球运动员”
},
{
产品名称：“沃尔科特”，
商业名称：“足球运动员”
},
{
产品名称：“切赫”，
商业名称：“足球运动员”
},
{
产品名称：“jordan”，
商业名称：“演员”
},
{
产品名称：“汤姆”，
商业名称：“演员”
},
{
产品名称：“john”，
商业名称：“演员”
}
],
“最近”：[{
产品名称：“mike”，
企业名称：“学生”
},
{
产品名称：“贝克汉姆·约翰”，
商业名称：“足球运动员”
},
{
产品名称：“沃尔科特”，
商业名称：“足球运动员”
}
]
}
新Vue({
el:“#应用程序”，
数据（）{
返回{
筛选器：“”，
项目：空，
加载：错误
}
},
计算：{
搜索（）{
如果（！this.items）{
返回[]
}
如果（！this.filter）{
返回此.items.recent
}
返回this.items.result.filter（item=>item.product_name.includes（this.filter）| | item.business_name.includes（this.filter））
}
},
安装的（）{
这是真的
this.fetchData（）。然后（（）=>{
此参数为0。加载=错误
})
},
方法：{
异步获取数据（）{
//这里将使用fetch模拟一个反同步调用
//
//实际的提取调用如下所示：
//
//this.items=wait fetch（'/path/to/api'）。然后（res=>res.json（））。然后（json=>json）
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
this.items=数据
解决（）
}, 3000)
})
}
},
模板：`
搜寻
加载
{{！！筛选？'Search Results'：'Recent Search'}


产品名称：{{item.Product_Name}

企业名称：{{item.Business_Name}



`
})
#包装器{
填充：1rem 5rem；
显示器：flex；
弯曲方向：立柱；
背景色：rgba（179229252,1）；
}
.装货：在{
内容：‘’；
动画：点1步（5，结束）无限；}
@关键帧点{
0%, 20% {
颜色：rgba（0,0,0,0）；
文本阴影：
.25em 0 rgba（0,0,0,0），
.5em 0 rgba（0,0,0,0）；}
40% {
颜色：黑色；
文本阴影：
.25em 0 rgba（0,0,0,0），
.5em 0 rgba（0,0,0,0）；}
60% {
文本阴影：
.25em 0 0黑色，
.5em 0 rgba（0,0,0,0）；}
80%, 100% {
文本阴影：
.25em 0 0黑色，
.5em 0 0白色；}}

请说明如何将此示例与
获取一起使用？这是我第一次使用vue jsI，我已经用一个例子和更多细节更新了答案。你能提供Codesandbox链接吗
const appSearch = new Vue({
    el: "#SearchVueContenPage",
     data() {
        return {
            searchProduct: [], /*show this item only for search*/
            recentSearch: [], /*show this when page load or not searching*/
            q: ''
        }
      },
       methods: {

       },
        created() {
            fetch(ajax_appserver("public", "_api/searchProduct.php?fetch_api=true&getFromApp=vue&search="))
            .then(response => response.json())
            .then(json => {
                this.searchProduct = json.result;
                this.recentSearch = json.recent.slice(0, 3);
            });
        },
        computed: {
            filterSearchs: function(){
                return this.searchProduct.filter((row) => {
                    var query = this.q.toLowerCase();
                    return row.product_name.toLowerCase().indexOf(query)>-1 || row.business_name.toLowerCase().indexOf(query)>-1;
                });
            }
    }

});