Невозможно вызвать функцию в vs- выпадающем по @click - PullRequest
Новая
       41

Невозможно вызвать функцию в vs- выпадающем по @click

0 голосов
/ 10 ноября 2019

Я использую против раскрывающегося списка для уведомления, и мне нужно вызвать функцию "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 Ответ

0 голосов
/ 10 ноября 2019

@change не будет вызываться при нажатии. Это будет вызываться только при выборе опции. Попробуйте изменить его на @click. Если у вас есть проблемы с фреймворком, вы можете сделать свой собственный выпадающий список, который будет работать. Нечто подобное делается здесь: https://codepen.io/diemah77/pen/avabWG

Также, пожалуйста, имейте в виду, что VS, как заявили их разработчики, не готов к производственному коду, поэтому могут быть ошибки в самой платформе, которые вызывают неожиданныеповедение, даже если ваш код корректен.

По правде говоря, Vuesax предстоит долгий путь в плане разработки. Компоненты должны быть созданы, улучшены и исправлены. На данный момент Vuesax не должен использоваться для реального приложения. Однако мы прилагаем все усилия, чтобы добиться стабильной версии, и у нас есть силы использовать ее в любом приложении.

...