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>