vue.js 搜索过滤器

发布于10月08日

我有一个表格，显示了我使用以下代码获得的项目列表:

interface getResources {
    title: string;
    category: string;
    uri: string;
    icon: string;
}
@Component
export default class uservalues extends Vue {

    resources: getResources[] = [];

    created() {
        fetch('api/Resources/GetResources')
            .then(response => response.json() as Promise<getResources[]>)
            .then(data => {
                this.resources = data;
            });
        }
    }
}

这是我的桌子:

 <div class="panel panel-default">
     <div class="panel-heading" style="font-weight:bold"><span class="glyphicon glyphicon-align-justify"></span> All Resources</div>
         <div class="row">
             <div class="search-wrapper panel-heading col-sm-12">
                 <input class="form-control" type="text" v-model="searchQuery" placeholder="Search" />
             </div>                        
         </div>
         <div class="panel-body" style="max-height: 400px;overflow-y: scroll;">
             <table v-if="resources.length" class="table">
                 <thead>
                     <tr>
                         <th>Resource</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr v-for="item in resources">
                         <td><a v-bind:href="item.uri" target="_blank">{{item.title}}</a></td>
                     </tr>
                 </tbody>
             </table>
         </div>
     </div>
</div>

我试图实现一个搜索栏，为用户过滤结果，但我迷路了！

有什么建议吗？

new Vue({ el: '#app', data() { return { searchQuery: null, resources:[ {title:"ABE Attendance",uri:"aaaa.com",category:"a",icon:null}, {title:"Accounting Services",uri:"aaaa.com",category:"a",icon:null}, {title:"Administration",uri:"aaaa.com",category:"a",icon:null}, {title:"Advanced Student Lookup",uri:"bbbb.com",category:"b",icon:null}, {title:"Art & Sciences",uri:"bbbb.com",category:"b",icon:null}, {title:"Auxiliares Services",uri:"bbbb.com",category:"b",icon:null}, {title:"Basic Skills",uri:"cccc.com",category:"c",icon:null}, {title:"Board of Trustees",uri:"dddd.com",category:"d",icon:null} ] }; }, computed: { resultQuery(){ if(this.searchQuery){ return this.resources.filter((item)=>{ return this.searchQuery.toLowerCase().split(' ').every(v => item.title.toLowerCase().includes(v)) }) }else{ return this.resources; } } } })

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" > </head> <body> <div id="app"> <div class="panel panel-default"> <div class="panel-heading"> <strong> All Resources</strong></div> <div class="row"> <div class="search-wrapper panel-heading col-sm-12"> <input class="form-control" type="text" v-model="searchQuery" placeholder="Search" /> </div> </div> <div class="table-responsive"> <table v-if="resources.length" class="table"> <thead> <tr> <th>Resource</th> </tr> </thead> <tbody> <tr v-for="item in resultQuery"> <td><a v-bind:href="item.uri" target="_blank">{{item.title}}</a></td> </tr> </tbody> </table> </div> </div> </div> </body> </html>

vue.js 搜索过滤器

推荐答案

Vue.js相关问答推荐

当props 的值改变时如何更新类'

如何将外部 svg 转换为 Vue3 组件？

如何在Vue js 3中根据API响应替换react 值

已分配计算(computed)属性，但它没有设置器

props至少应该定义它们的类型

Vuex 和 Event Bus 有什么区别？

Vue + Webpack 构建显示空白页面

使用 v-slot：body 时 Vuetify v-data-table 没有响应

Vue 两种方式的 prop 绑定

Bootstrap-vue b-table，标题中带有过滤器

如何在 vue.js 中包含当年的版权？

在 SPA VueJS 中全局声明 mapState 和 mapMutations

如何将 mapActions 与 vue + Typescript 类组件一起使用？

Vuejs模板继承

vue js 中的 process.env.BASE_URL 是什么？

阻止 Vue 积极重用 dom 元素

如何将 git hash 添加到 Vue.js 组件

简单的点击功能不触发

按键删除对象不会更新vue组件

如何从扩展面板(Vuetify)中删除阴影？