如何在 VueJs 中将我的搜索显示到我的表中？

Posted 2023-02-22

【中文标题】如何在 VueJs 中将我的搜索显示到我的表中？

【英文标题】：How to display my search to my table in VueJs?

【发布时间】：2019-11-03 22:12:18

【问题描述】：

我只是想问一下，我想在我的表格中显示搜索到的值？ 下面的代码在 div 中显示 Memb_ID。

div>
    <div class="search-wrapper">
      <input type="text" v-model="search" placeholder="Search title..">
      <label>Search title:</label>
    </div>

 <div v-for="cust in filteredList" :key="cust.id"> cust.Memb_ID </div>

<div class="myTable table-responsive">
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th>Member ID</th>
          <th>First Name</th>
          <th>Middle Name</th>
          <th>Last Name</th>
          <th>Address</th>
          <!-- <th>URL</th> -->
        </tr>
      </thead>

      <tbody>
        <tr v-for="result in results" :key="result.id">
          <td>result.Memb_ID</td>
          <th>result.First_Name</th>
          <th>result.Middle_Name</th>
          <th>result.Last_Name</th>
          <th>result.Address</th>
          <!-- <th>user.url</th> -->
        </tr>
      </tbody>
    </table>
  </div>

这是我的代码的output。 我想要 this 之类的东西

我从question 获得了代码，但无法自行实现。感谢您的帮助！

【参考方案1】：

所以我认为我通过循环表体解决了我的问题。 这里有个bug。每次我重新加载页面时，它都不会加载 vue 文件，哈哈。我认为刷新页面后它没有显示表格就可以了。

我不知道这个错误

<div>
    <input type="text" v-model="search" placeholder="Search title..">
  </div>
  <div class="myTable table-responsive">
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th>Member ID</th>
          <th>First Name</th>
          <th>Middle Name</th>
          <th>Last Name</th>
          <th>Address</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="result in filteredList" :key="result.id">
          <td>result.Memb_ID</td>
          <th>result.First_Name</th>
          <th>result.Middle_Name</th>
          <th>result.Last_Name</th>
          <th>result.Address</th>
        </tr>
      </tbody>
    </table>
  </div>

在脚本中

computed: 
filteredList() 
  return this.results.filter(customer => 
    customer.Memb_ID.toLowerCase().includes(this.search.toLowerCase());
  );

,