Cannot call function in vs- dropdown by #click - vue.js

Question

i am using vs dropdown for notification and i need to trigger the function "abc()" when dropdown feather icon is clicked but on clicking the function is not triggered
<div class="bellicon" >
<feather-icon icon="BellIcon" class="cursor-pointer mt-1 sm:mr-6 mr-2" :badge="length1" >
</feather-icon>
</div>
<vs-dropdown-menu class="notification-dropdown dropdown-custom" #change="abc()">
<div class="notification-top text-center p-5 bg-primary text-white">
<h3 class="text-white">{{ unreadNotifications.length }} New</h3>
<p class="opacity-75">App Notifications</p>
</div>
<VuePerfectScrollbar ref="mainSidebarPs" class="scroll-area--nofications-dropdown p-0 mb-10" :settings="settings">
<ul class="bordered-items">
<li v-for="ntf in unreadNotifications" :key="ntf.index" class="flex justify-between px-4 py-4 notification cursor-pointer">
<div class="flex items-start">
<feather-icon :icon="ntf.icon" :svgClasses="[`text-${ntf.category}`, 'stroke-current mr-1 h-6 w-6']"></feather-icon>
<div class="mx-2">
<span class="font-medium block notification-title" :class="[`text-${ntf.category}`]">{{ ntf.title }}</span>
<small>{{ ntf.start }} {{ ntf.total }}{{ ntf.msg }}</small>
</div>
</div>
<small class="mt-1 whitespace-no-wrap">{{ elapsedTime(ntf.time) }}</small>
</li>
</ul>
</VuePerfectScrollbar>
<div class="
checkout-footer
fixed
pin-b
rounded-b-lg
text-primary
w-full
p-2
font-semibold
text-center
border
border-b-0
border-l-0
border-r-0
border-solid
border-grey-light
cursor-pointer">
<span>View All Notifications</span>
</div>
</vs-dropdown-menu>
</vs-dropdown>
the function abc() contains console.log but it is not working

Answer 1

The #change will not be invoked on click. This will only be invoked when an option is selected. Try changing it to #click. If you're having issues with the framework, you can make your own drop-down that will work. Something like that is done here: https://codepen.io/diemah77/pen/avabWG
Also, please keep in mind that VS is, as stated by their developers, not ready for production code, so there may be bugs in the framework itself that cause unexpected behavior even if your code is proper.
The truth is, Vuesax has a long way to go in terms of development. Components must be created, improved and fixed. For now, Vuesax should not be used for a real application. However, we are working very hard to achieve the stable version and have the strength to use it in any application.

Answer 2

vsDropdown component emits click event when you click on dropdown:
Source Code
So your code just needs a little bit of update:
First of all, you didn't add full code because vs-dropdown start tag is missing. That's where you should listen to click event.
So code looks like this:
<template lang="html">
<div class="examplex">
<!-- ATTENTION 👀 -->
<vs-dropdown #click="hello">
<a class="a-icon" href="#">
Dropdown hover
<vs-icon icon="expand_more"></vs-icon>
</a>
<vs-dropdown-menu>
<vs-dropdown-item>
Option 1
</vs-dropdown-item>
</vs-dropdown>
</div>
</template>
<script>
export default {
methods: {
hello() {
console.log('object');
}
}
}
</script>
<style lang="stylus">
.examplex
display: flex;
align-items: center;
justify-content: center;
.a-icon
outline: none;
text-decoration: none !important;
display: flex;
align-items: center;
justify-content: center;
i
font-size: 18px;
</style>
Notice that <vs-dropdown #click="hello"> that's your way out.
I hope this will resolve your issue. 🥂