Vue.js 2筛选器无法处理数据表

正在尝试按客户端的名称筛选数据。尝试了许多选择，但没有成功。目前，我将客户名单分为一个单独的组件，随着项目的扩大，我打算使用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>

{{index}}
{{client.name}
{{client.type}
{{client.email}
{{client.phone}
导出默认值{
名称：'客户端信息'，
道具：{
客户：{
类型：数组，
默认值：（）=>[]
}
},
数据（）{
返回{
搜索：“”
}
},
创建（）{
此.$store.dispatch（'retrieveClients'）
},
计算：{
筛选客户端（）{
返回此.clients.filter（客户端=>{
return！this.searchClient | | client.name.toLowerCase（）.includes（this.searchClient.toLowerCase（））>-1
})
}
}
}

这是客户端列表组件

<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”导入{mapGetters}
从“@/components/clientslistexperience/ClientInfo”导入ClientInfo
导出默认值{
名称：'客户列表'，
组成部分：{
客户信息表
},
数据（）{
返回{
搜索：空
}
},
计算：{
…映射获取程序（['allClients']），
}
}

---

我知道搜索的数据目前放在两个组件中，只是尝试不同的东西。此外，目前还没有将vuex设置为用于逻辑和状态。如果我完全偏离了轨道，请让我知道

表格标签需要

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>

#
名称
类型
电子邮件
电话
轮廓
{{index}}
{{client.name}
{{client.type}
{{client.email}
{{client.phone}

table tag删除内部标记

我建议，将所有

table

标记放入

组件中，如图所示重新定位代码，但不做任何更改。没有收到任何警报，但也没有发生任何事情。这就像组件之间没有通信一样，将数据从显示所有客户端更改为仅显示搜索的客户端名称。也许我需要改变负载？