I am trying to pass data from my MultiSelectFilter component to my Home.vue view, but I am not seeing any results when using console.log. Even after checking the documentation on using the @input event for capturing changes in selection (), I can't seem to get it to work properly.
As a newcomer to vueJS, I'm struggling to identify where I might be going wrong. Additionally, I have attempted to pre-select all default values without success in changing the value upon initialization.
My main objective is to create multiple selectors within my view by looping through them, which led me to develop a component for this purpose.
Below is a snippet from my Home.vue file:
<template>
<main id="Home-page">
<h1>Dashboard</h1>
<div class="filter-wrapper">
<div class="filter-icon">
<font-awesome-icon icon="fa-solid fa-filter" />
</div>
<div class="filter-content">
<MultiSelectFilter :options="teamOptions" label="teams"/>
</div>
</div>
</main>
</template>
... // Rest of the code can remain as is
This is how I structured my MultiSelectFilter.vue file:
<template>
<multiselect v-model="selectedOptions" :select-group-label="selectGroupLabel"
group-values="data" group-label="all" :group-select="true" :options="transformedOptions" :placeholder="label"
:multiple="true" :searchable="searchable" :close-on-select="false" @input="updateSelectedOptions">
<template v-slot:noResult>{{ noResult }}</template>
</multiselect>
</template>
... // Rest of the code can remain as is