My best way call Vue component method in chrome devtools
mixbo
Posted on June 6, 2020
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
You should select witch component want to fetch, you can found selected component will show $vm0 $vm1 $vm2
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
From screenshot you can call togglePrivacy
at $vm0 like you call at you code, so simple and concise.
Hope it can help you :)
Posted on June 6, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.