CODEWITHSUNDEEP
vue.jsvuejs2vue-component
JustWe
JustWe

Reputation: 4484

How to invoke a function of vue component?

For my understanding, The Vue component is a class, So I can include it like:

import MyDialogComponent from './MyDialog.vue'

create an instance:

<my-dialog-component/>

Looks like I could assign the visibility property like:

prop: ['showDialog'] //delcare property
...
<md-dialog :md-active.sync="getActive"> 
...
computed:{ getActive: function () { return this.showDialog } } 
...
<my-dialog-component show-dialog='true'/>

To make dialog component visible. when I try to show dialog by button clicking. Everything becomes complicate. Many variables need to declare and bind on both sides. But actually only one property I am using, the visibility of MyDialog.

So to show MyDialog, anyway like this?

myDialog1.showMe()

Invoke the public function of the instance.

Upvotes: 1

Views: 228

Answers (1)

Mark Redman
Mark Redman

Reputation: 24515

You can add a ref to your component

eg: <my-dialog-component ref="dialog1" />

then in you code:

this.$refs.dialog1.showMe()

Upvotes: 1

Related Questions