Failed to read filter property of Undefined on Vue.js

Question

I’m getting this error message on Vue.js:

TypeError: Cannot read property ‘filter’ of undefined.

export default {


data: () => ({
    plugins: {},
    search: '', 
}),
components: {
    ToolbarPlugin
},
mounted() {
    PluginService.list().then(plugins => {
        this.plugins = plugins.reduce((result, plugin) => {
            (result[plugin.toolbarGroup] = result[plugin.toolbarGroup] || []).push(plugin);
           console.log(plugin)
            return result;
        }, {});
    }, () => {
        console.error("Failed to load plugins");

    });
},

computed:{
    filteredItems: function(){
        return this.items.filter((item)=>{
            return  item.name.match(this.search)
        })
    }
 }


}




<template>
<v-col sm="2" class="pa-0 toolbar-wrapper fill-height">
    <v-container class="fill-height smartfy-toolbar align-content-start px-0 py-3 flex-nowarp">

<h2 class="mx-auto white--text mb-3">Toolbar</h2>

        <v-expansion-panels accordion multiple dark class="smartfy-toolbar-item">

            <v-expansion-panel v-for="(items, category) in plugins" :key="category">
                <v-expansion-panel-header expand-icon="mdi-menu-down">
                    {{ category }}
                </v-expansion-panel-header>
                <input type="text" id="search" v-model="search" placeholder="Search plugins" ><br><br>
                <v-expansion-panel-content>
                    <v-row class="toolbar-item-row" v-for="i in Math.ceil(filteredItems.length / 2)" :key="i">
                        <ToolbarPlugin v-for="item in filteredItems.slice((i - 1) * 2, i * 2)" :key="item.name" v-bind:plugin="item" />
                    </v-row>
                </v-expansion-panel-content>
            </v-expansion-panel>
        </v-expansion-panels>
    </v-container>
</v-col>
</template>

Answer 1

Try to put the items within its date.

data: () => ({
  plugins: {},
  search: '',
  items: []
}),