Vue.js 2過濾器不適用於數據表

Question

嘗試按客戶端名稱過濾數據。 嘗試了許多沒有運氣的選擇。 目前，我已經將客戶列表分解為一個單獨的組件，並打算在項目變得更大時使用vuex。 如此說來，我目前已將用於過濾的邏輯放在我的客戶信息組件中，其中搜索的輸入在客戶列表組件中。 見下文

這是客戶信息組件

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

這是客戶列表組件

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

我知道搜索的數據目前放在兩個組件中，只是嘗試了不同的方法。 同樣，現在還沒有設置將vuex用於邏輯和狀態。 如果我完全偏離軌道，請告訴我！

Answer 1

表格標簽需要thead ， tbody或tr 。 它將刪除其他標簽，因此將表標簽放入組件中。

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

並將表格標簽和所有內部標簽放在一起

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