[Vuejs]-Vue 2 filter is not a function

by

0👍

When using 

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

with default value an empty array means that if you define a component without passing a list prop then vue will use that default value.

For example, if you have defined a component like this:

<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],
        },
    },
};

and then define a component instance like:

<my-list></my-list>

your component would render:

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

However, if you defined your component instance like this:

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

your component would render:

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

Given that, and without knowing what your retrieveClients action does, what I can only assume is that the ‘allClients’ value that you pass to ‘clients’ prop is not an Array therefore the filter function does not exist.

Make sure your action mutates the state to at least an empty array if allClients is a state property. Else if, allClients is a getter make sure that returns at least an empty Array.

Leave a comment