I'm currently navigating the world of Vue Js and am facing a challenge implementing a search feature within a Vuetify table using an input field. The data for the table items is stored in a computed property, but when I attempt to type in the search input, I encounter the following errors:
To enhance the search functionality by enabling filtering on multiple fields, I have opted for a custom structure rather than sticking to the default component setup outlined in the documentation.
Component:
<template>
<v-container fluid>
<ConfigurationDialog :show="showConfigurationDialog" @close-configuration="handleCloseConfiguration" />
<transition appear name="custom" appear-active-class="animated zoomIn" :duration="2000">
<v-row>
[...] (content continues)
</v-card>
</v-col>
[...] (more content)
mounted() {
this.getJourneysList();
}
format(date: string) {
return formatDate(date);
}
}
</script>
<style scoped>
.actionButton {
box-shadow: none !important;
}
.alerts {
text-align: center;
left: -4px !important;
top: 0px !important;
}
.routerLinkButton a {
text-decoration: none;
}
</style>Would appreciate any assistance or insights. Thank you.