TypeScript / VueJS过滤搜索

Question

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

MY表已填充：

<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="" 
         placeholder="Search" />
     </div>                        
</div>
<tbody>
    <tr v-for="item in resources">
        <td><a v-bind:href="item.uri" target="_blank">{{item.title}}</a></td>
    </tr>
</tbody>

JS

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;
        });
    }

}

我希望能够在搜索栏中键入内容并在输入时获得结果。

我尝试了类似的操作

 filteredResources() {
    if (this.searchQuery) {
        return this.resources.filter((item) => {
            return item.title.startsWith(this.searchQuery);
        })
    } else {
        return this.resources;
    }
}