Question

尝试使用输入过滤对象数组。到目前为止，我已经尝试了多种方法，但没有运气。它告诉我我的函数“ clients.filter”不是一个函数。如果我将代码设置为“ list.filter”，则会得到相同的消息，搜索的输入实际上是一个单独组件的一部分，并且我不确定这是否是我的问题。见下文

这是我从api收集客户端并列出到数据表中的组件

<template>
 <table class="table table-bordered 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 filterBy(clients, searchClient)"  :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>
    </table>
</template>

<script>


export default {
    name: 'client-info',
    props: {
        clients: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
        searchClient: ''
        }
    },
    created() {
    this.$store.dispatch('retrieveClients')
    },
    computed: { 
     filterBy (clients, value) {
         return clients.filter( client => {
             console.log(this.clients)
             return client.name.indexOf(value) > -1;
      })
    }
  }

}
</script>

next是实际显示列表的父组件。我相信我的结构已经关闭，因为我正在使用vuex。但是无论如何，我不确定为什么它告诉我的“ clients.filter”不是一个函数。

<template>
 <div>

<!-- this is the buttons and filter above the list -->
    <div class="d-flex mb-3">.
      <input class="form-control w-25" placeholder="Filter By Name" v-model="searchClient" type="search">
      <div class="mr-auto ml-2">
        <button class="btn btn-outline-primary dropdown-toggle dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span>Type:</span>
          All
        </button>
        <div class="dropdown-menu dropdown-menu-left">
          <a class="dropdown-item" href="#">Business</a>
          <a class="dropdown-item" href="#">Individual</a>
        </div>
      </div>         

      <div class="btn-group ml-auto">
        <button class="btn btn-outline-secondary"><i class="fas fa-print"></i></button>
        <button class="btn btn-outline-success">Import <span><i class="fas fa-download"></i></span></button>
        <button class="btn btn-outline-danger">Export <span><i class="fas fa-upload"></i></span></button>
        <router-link to="/add" class="btn btn-primary pt-2">Add Client</router-link>
      </div>

    </div>


    <!-- the clients data is imported from client info file -->
    <div>      
      <client-info :clients="allClients"></client-info>      
    </div>



 </div>
</template>

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


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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">



</style>

我尝试的另一种选择是这样定义我的计算方法

filterClient () {
         return this.clients.filter( client => {
             return !this.searchClient || client.name.toLowerCase().includes(this.searchClient.toLowerCase()) > -1
      })
    }

然后也更改我的v-for

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

但是仍然没有运气，尽管我没有收到有关该定义的警报，但我也没有得到任何结果。任何帮助都会很棒！

Answer 1

使用

props: {
    list: {
        type: Array,
        default: () => []
    }
},

具有默认值的空数组意味着如果您在不传递列表属性的情况下定义组件，则vue将使用该默认值。

例如，如果您定义了这样的组件：

<template>
    <ul>
        <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
</template>

export default {
    name: 'MyList',
    props: {
        list: {
            type: Array,
            default: () => [1, 2, 3],
        },
    },
};

，然后定义一个组件实例，例如：

<my-list></my-list>

您的组件将呈现：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

但是，如果您这样定义组件实例：

<my-list :list="['a', 'b', 'c']"></my-list>

您的组件将呈现：

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

鉴于这一点，并且不知道您的retrieveClients动作是做什么的，我只能假定的是，您传递给“ clients”属性的“ allClients”值不是数组，因此过滤器功能不存在。

如果allClients是state属性，请确保您的操作将状态至少更改为一个空数组。否则，如果allClients是getter，请确保至少返回一个空数组。

Vue 2过滤器不起作用

1 个答案: