Estou tendo está mensagem de erro em 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>