无法通过@click 调用 vs- 下拉列表中的函数

Posted 2023-02-23

【中文标题】无法通过@click 调用 vs- 下拉列表中的函数

【英文标题】：Cannot call function in vs- dropdown by @click

【发布时间】：2020-03-06 05:49:43

【问题描述】：

我正在使用 vs 下拉菜单进行通知，我需要在单击下拉羽毛图标时触发函数“abc()”，但在单击时未触发该函数

            <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>

函数 abc() 包含 console.log 但它不起作用

【参考方案1】：

@change 不会在点击时被调用。这只会在选择选项时调用。尝试将其更改为@click。如果您对框架有疑问，您可以制作自己的下拉菜单。类似的事情在这里完成：https://codepen.io/diemah77/pen/avabWG

另外，请记住，正如他们的开发人员所说，VS 还没有准备好用于生产代码，因此即使您的代码是正确的，框架本身也可能存在导致意外行为的错误。

事实上，Vuesax 在发展方面还有很长的路要走。必须创建、改进和修复组件。目前，Vuesax 不应该用于真正的应用程序。但是，我们正在努力实现稳定版本，并有能力在任何应用程序中使用它。

【参考方案2】：

当您单击下拉菜单时，vsDropdown 组件会发出 click 事件： Source Code

所以你的代码只需要一点点更新： 首先，您没有添加完整代码，因为缺少 vs-dropdown 开始标记。那就是你应该收听click事件的地方。

所以代码如下所示：

<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>

注意<vs-dropdown @click="hello"> 这是你的出路。

我希望这能解决您的问题。 ?