无法通过@click在vs下拉菜单中调用函数

2024-05-16 • 问答

我正在使用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，但不起作用

@change不会在点击时被调用。仅当选择一个选项时，才会调用此选项。尝试将其更改为@click。如果您在框架方面遇到问题，则可以创建自己的下拉菜单，以供使用。像这样的事情在这里完成：https://codepen.io/diemah77/pen/avabWG

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

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

, 当您单击下拉列表时，

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">是您的出路。

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

无法通过@click在vs下拉菜单中调用函数

trydiy 回答：无法通过@click在vs下拉菜单中调用函数

大家都在问