Javascript 动态列表视图的搜索栏

我想在一个表中查看数据库中的所有对象。当你点击一条记录时，你可以在旁边看到它的详细信息

我还想做一个搜索栏，这将有助于在列表中找到所需的记录。我找不到有效的解决办法。我不想失去动态列表设计。每个解决方案都使用一个静态资源列表

---

我的代码：

<div class="container">
    <div class="list row">
        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item"
                    :class="{ active: index == currentIndex }"
                    v-for="(client, index) in clients"
                    :key="index"
                    @click="setActiveClient(client, index)"
                >
                    {{ client.name + ' ' + client.surname}}
                </li>
            </ul>
        </div>
        <div class="col-md-6">
            <div v-if="currentClient">
                <h4>Klient</h4>
                <div>
                    <label><strong>Imię:</strong></label> {{ currentClient.name }}
                </div>
                <div>
                    <label><strong>Nazwisko:</strong></label> {{ currentClient.surname }}
                </div>
                <div>
                    <label><strong>Nr Telefonu:</strong></label> {{ currentClient.phoneNumber }}
                </div>
                <div>
                    <label><strong>Email:</strong></label> {{ currentClient.email }}
                </div>
                <div>
                    <label><strong>Notatka:</strong></label> {{ currentClient.description }}
                </div>

                <a class="badge badge-warning"
                   :href="'/clients/' + currentClient.id"
                >
                    Edytuj
                </a>
            </div>
            <a href="/addClient" class="btn btn-info" role="button">Dodaj</a>
        </div>
    </div>
</div>

{{client.name+''+client.name}


克利特
Imię：{{currentClient.name}
Nazwisko:{{currentClient.nam姓氏}
Nr电话号码：{{currentClient.phoneNumber}
电子邮件：{{currentClient.Email}
Notatka:{{currentClient.description}

您可以添加匹配后将返回列表的计算属性。我最近在我的项目中使用了这种方法。结果证明，它既高效又简单

数据

data() {
  return {
     clients: [], // will contain your data
     searchKey: ""
}

在模板中搜索输入框

<input placeholder='enter search key' v-model="searchKey" />

现在在您的列表中，用

getClients

<li class="list-group-item"
                    :class="{ active: index == currentIndex }"
                    v-for="(client, index) in getClients" // here
                    :key="index"
                    @click="setActiveClient(client, index)"
                >
                    {{ client.name + ' ' + client.surname}}
                </li>

{{client.name+''+client.name}

---

如果您的搜索键为空，这意味着用户没有输入任何搜索谓词，它将显示所有客户端，否则它将只显示一个与

名称

或

姓氏

匹配的客户端！但当您使用计算方法时，返回指令中会出现双重否定。你只需要在begginig删除“！！”。是的，ik linter问题：D

<li class="list-group-item"
                    :class="{ active: index == currentIndex }"
                    v-for="(client, index) in getClients" // here
                    :key="index"
                    @click="setActiveClient(client, index)"
                >
                    {{ client.name + ' ' + client.surname}}
                </li>