新手上路，请多包涵

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

 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>

我正在尝试实现一个搜索栏来过滤用户的结果，但我迷路了！

有什么建议么？

原文由 user3376642 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript typescript vue.js vuejs2 vue-component

阅读 346

2 个回答

得票最新

社区维基

发布于
2022-11-14

✓ 已被采纳

您可以使用 --- 的 array includes() 功能来搜索句子或短语中的任何位置。

 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在数组中搜索关键字

原文由 Vladimir Salguero 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-11-14

对于这种情况，您可以使用 computed 属性，因此，我创建了一个名为 filteredResources --- 的属性，它将用于 v-for 循环，我使用了虚拟数据，可以让你的 resources 声明为空并调用一个 promise 函数来填充它 created 钩子，如果你更喜欢单文件组件或者你正在使用 Vue 的以下代码，请检查此代码通过 CDN

 new Vue({
  el: '#app',
  data() {
    return {
      searchQuery:'',
    resources:[
    {title:"aaa",uri:"aaaa.com",category:"a",icon:null},
     {title:"add",uri:"aaaa.com",category:"a",icon:null},
      {title:"aff",uri:"aaaa.com",category:"a",icon:null},
    {title:"bbb",uri:"bbbb.com",category:"b",icon:null},
    {title:"bdd",uri:"bbbb.com",category:"b",icon:null},
    {title:"bsb",uri:"bbbb.com",category:"b",icon:null},
    {title:"ccc",uri:"cccc.com",category:"c",icon:null},
    {title:"ddd",uri:"dddd.com",category:"d",icon:null}
    ]
    };
  },
  computed: {
    filteredResources (){
      if(this.searchQuery){
      return this.resources.filter((item)=>{
        return item.title.startsWith(this.searchQuery);
      })
      }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" 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 filteredResources">
                                <td><a v-bind:href="item.uri" target="_blank">{{item.title}}</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
</div>

</body>
</html>

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Vuejs 搜索过滤器

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

Stack Overflow 翻译