Vue.js 2 filter is not working with data table

Question

Attempting to filter data by the name of the client. Tried many options with no luck. currently i have the list of clients broken out to a separate component with intention to use vuex as the project becomes larger. So with that being said i have currently placed the logic for filtering inside my client info component where as the input for the search is in the clients list component. see below

this is the clients info component

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

<script>


export default {
    name: 'client-info',
    props: {
        clients: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
        search: ''
        }
    },
    created() {
    this.$store.dispatch('retrieveClients')
    },
    computed: { 
     filterClient () {
         return this.clients.filter( client => {
             return !this.searchClient || client.name.toLowerCase().includes(this.searchClient.toLowerCase()) > -1
      })
    }
  }

}
</script>

this is the clients list component

<template>
 <div>


<!-- this is the head of the table list -->
  <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> 
    <!-- the clients data is imported from client info file -->
    <client-info :clients="allClients"></client-info>      
  </table>



 </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ClientInfo from '@/components/clientslistexperience/ClientInfo'


export default {
name: 'ClientsList',
  components: {
    ClientInfo
  },
  data() {
    return {
      search: null
    }
  },
  computed: {
    ...mapGetters(['allClients']),
  }
}
</script>

i am aware that the data for the search is placed in both components at the moment, just trying different things out. Also that right now it is not being set up to use vuex for the logic and state. If I am completely off track please let me know!

Answer 1

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>