How can I callback modal methods in Vue way?

[iigmir]

I build a website with Kube and Vue. Here's problem:

// In HTML file
<div id="foobar" class="modal-box hide" v-on:close.modal="reset_datas">
    <div class="modal">
        <span class="close"></span>
        <div class="modal-header"> {{ a }}</div>
        <div class="modal-body">
            {{ b }}
        </div>
    </div>
</div>

// In JS file
var foobar= new Vue
({
    el:"#foobar",
    data:
    {
        a: "Some info",
        b: "Some another info",
    },
    methods:
    {
        reset_datas:function()
        {
            foobar.a="";
            foobar.b="";
        }
    }
});

I need to close modal, but v-on:close.modal dosen't work.
I try to use jQuery way:

$('#foobar').on('close.modal', function()
{
    foobar.a="";
    foobar.b="";
});

But that way can only execute once. If I need to close twice more, it won't execute anymore.
In this scenario, how can I callback modal methods?

[fillibuster77]

@iigmir Did you solve the problem?
I'm looking for a solution to raise the close.modal several times

[iigmir]

@fillibuster77
Maybe no. I deal my problem by other method: When I click element can show modal, reset data. Just something like this:

<button v-on:click="reset_datas()"> Click me to open modal! </button>

Well, although timing is not pretty good, this is what I can to.

[FrancescoMussi]

@iigmir @fillibuster77 Hey guys, how did you install Kube for Vue?

I have installed this npm package:

https://www.npmjs.com/package/imperavi-kube

And then import the css files in the App.vue:

@import '../node_modules/imperavi-kube/dist/css/kube.css';
@import '../node_modules/imperavi-kube/dist/scss/kube.scss';

I can see the Kube styling..
Did you do something like that for the style?

And how did you import the kube.js?

And by the way that npm package doesn't seem to be up to date.. and there is no guarantee is going to be updated in the future.

What do you think about that?

[iigmir]

@FrancescoMussi
I use CDN. Therefore, I have nothing to do with Node. Sorry,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/kube/6.5.2/css/kube.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/kube/6.5.2/js/kube.min.js"></script>
<script src="https://unpkg.com/vue"></script>