Question

我想在一个表中查看数据库中的所有对象。单击记录时，在侧面可以看到有关它的详细信息。

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

我的代码：

<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>

Answer 1

您可以添加计算属性，该属性将在匹配后返回列表。我最近在项目中使用了这种方法。事实证明，这是高效且容易的。

数据

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

模板中的搜索输入框

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

计算出的属性

computed: {
  getClients() {
   let r = new RegExp(this.searchKey, 'i'); // will search irrespective of casing

   return !!this.searchKey ? this.clients.filter( v => 
        r.test(v.name) ||
        r.test(v.surname) // add more search options if you want
    )  : this.clients;

  }
}

现在列表中的clients替换为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>

如果您的searchKey为空，则表示用户尚未输入任何搜索谓词，它将显示所有客户端，否则将仅显示与name 或 {{1 }}

搜索栏用于动态列表视图

1 个答案: