My best way call Vue component method in chrome devtools

ihavecoke

mixbo

Posted on June 6, 2020

My best way call Vue component method in chrome devtools

Do you have this situation write Vue component and debugging code in devtools, you want to call methods like "fetchxxx" on instance and get response.

Maybe you should open you editor then found Vue component and typing console.log(.....) to fetchxxx method. so that you can get response.

Also you can mounted fetchxxx to window object, then you can call it in devtools console panel typing fetchxxx then you got response

For me i found another way to graceful call fetchxxx methods in devtool without any consloe.log(xxx) or mounted to window also get response, let's show me the way.

I show simple way to call togglePrivacy at Vue component

Step 1

You should download vue-devtool then opened chrome devtools at you debugging page.

Step 2

You can found the Vue component instance at vue-devtools Component panel

Alt Text

You should select witch component want to fetch, you can found selected component will show $vm0 $vm1 $vm2

Alt Text

That $vm0 mean's the latest you selected vue component also mean's you can fetch this Vue component in chrome devtools when you typing $vm0, $vm1

Step 3

So far you can visit Vue component instance and call method too just need $vm0.togglePrivacy

Alt Text

Alt Text

From screenshot you can call togglePrivacy at $vm0 like you call at you code, so simple and concise.

Hope it can help you :)

💖 💪 🙅 🚩
ihavecoke
mixbo

Posted on June 6, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related