-3
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>
It wasn’t... Stop giving the bug, but when I put it to search, no options appear. And When you load the page, no entries appear. It is empty. Even the categories appear, but the items in this category do not
– daniel melgary
When I print filteredItems below the </v-Row> comes as empty
– daniel melgary
Um... do you fill out the items at any time? I didn’t notice any value being assigned to it in the above excerpt
– Freitas
I’ve solved the problem. Thank you
– daniel melgary