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>

Vue.js 2过滤器不适用于数据表

1 个答案: