[Vuejs]-Vue.js 2 filter is not working with data table

by

0👍

Table tag requires thead, tbody or tr . it removes other tag , so put table tag inside your component.

   <template>
     <div>
         <client-info :clients="allClients"></client-info>
     </div>
  </template>

and put table tag along with all inner tag 

   <template>

   <table class="table table-bordered table table-light table-striped table-hover">
  <thead class="thead-primary">
  <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Email</th>
      <th scope="col">Phone</th>
      <th scope="col">Profile</th>
  </tr>
 </thead> 
 <tbody class="client-info">
 <tr v-for="(client, index) in filterClient"  :key="index">
            <td>{{ index }}</td>
            <td>{{ client.name }}</td>
            <td>{{ client.type }}</td>
            <td>{{ client.email }}</td>
            <td>{{ client.phone }}</td>
            <td><router-link v-bind:to="'/client/'+client.id"><i class="far fa-eye"></i></router-link></td>
        </tr>
    </tbody>
    </template>

Leave a comment