1

I am using Vuejs - Vuikit components and have the following setup:

<template>
    <div class="uk-scope">
        <vk-modal :show="isShow" v-if="config">
          <vk-modal-close @click="alert('hello!')" large></vk-modal-close>
          <vk-notification :messages.sync="messages"></vk-notification>
            <app-breadcrumb :current-view="currentView" />
            <!-- render the currently active component/page here -->
            <component v-bind:is="currentView"/>
        </vk-modal>
    </div>
</template>

My issue is that, the close modal does not see to fire the @click function.

The parent component, does emit an event, but I would prefer to fire something directly from the close button.

I have tried to use @click.native="someFunction()", but this has not helped!

DobleL
  • 3,808
  • 14
  • 20
dendog
  • 2,976
  • 5
  • 26
  • 63
  • Do you get any errors on the console? If I'm understanding correctly, the `alert('hello!')` is supposed to display when the dialog closes? If that's the case it might be that when it closes, you lose the reference to that method, so it never occurs – IvanS95 Oct 30 '18 at 22:28

2 Answers2

0

Hey I've not used vuikit before but from their documents they show this is how to close a modal. I would also remove that v-if="config" as that might be confusing Vue

<template>
    <div class="uk-scope">
        <vk-modal :show.sync="isShow">
          <vk-modal-close @click="isShow = false" large></vk-modal-close>
          <vk-notification :messages.sync="messages"></vk-notification>
            <app-breadcrumb :current-view="currentView" />
            <!-- render the currently active component/page here -->
            <component v-bind:is="currentView"/>
        </vk-modal>
    </div>
</template>
Shipyard
  • 11
  • 1
0

Have you tried using @click.native="someFunction" note that this does not have ().

Sudarshan
  • 161
  • 2
  • 11