I am working on creating a filter component where I can pass filter options down to my child component. Each filter has a click event to open the filter for user selection, as well as a v-on-clickaway event that closes the options when the user clicks away.
Here is how my child component is structured:
<div
v-for="filter in filters"
id="desktop-menu-0"
class="relative inline-block text-left"
@click="toggle(filter.id, true)"
v-on-clickaway="toggle(filter.id, false)"
>...</div>
Below is the script for the child component:
<script lang="ts">
import { mixin as clickaway } from 'vue-clickaway'
export type FilterOptionT = {
text: string
value: unknown
selected: boolean
}
export type FilterT = {
id: any
text: string
open: boolean
values: FilterOptionT[]
}
export default {
mixins: [clickaway],
props: {
filters: {
default: () => [] as FilterT[],
},
},
setup(props, { emit }) {
function toggle(id: any, state: boolean) {
emit('toggleFilter', id, state)
}
return { toggle }
},
}
</script>
This is how the parent component is integrated into the code:
<filterVue @toggleFilter="toggleFilter" :filters="filters"></filterVue>
let filters = ref<FilterT[]>([
{
open: false,
text: paths.members_table.status,
id: 'status',
values: [
{
selected: false,
text: paths.statustexts.accepted,
value: Userstatus.ACCEPTED,
},
{
selected: false,
text: paths.statustexts.asked,
value: Userstatus.WAIT,
},
{
selected: false,
text: paths.statustexts.activated_eda,
value: Userstatus.MC_ACTIVATED,
},
],
},
])
function toggleFilter(filterId: any, state: boolean) {
console.log(state, filterId)
let filterIndex = filters.value.findIndex((f) => f.id === filterId)
if (filterIndex !== -1) {
filters.value[filterIndex].open = state
}
}
After clicking on the element, it logs 3 messages in the console:
https://i.sstatic.net/Z1FFn.png
The filter instantly closes, and I am trying to figure out what I might be doing wrong here.