How to display my search to my table in VueJs? - node.js

Question

I just want to ask, I want to display the searched value in my table?
Below code displays Memb_ID in div.
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>
This is the output of my code.
I want something like this
I got the code from this question but couldn't implement on my own. Thanks for help!

Answer 1

So I thought I solved my problem by looping in the table body.
There's a bug in here. Every time I reload the page it doesn't load the vue file lol. I thought it was okay after refreshing the page it didn't display the table.
I don't know the bug
<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>
and in script
computed: {
filteredList() {
return this.results.filter(customer => {
customer.Memb_ID.toLowerCase().includes(this.search.toLowerCase());
});
}
},