Vue JS How to call function after page loaded

Question

I have got next Vue component  Login as calling Login function  checkAuth -- is calling checking Authorization status between page refresh  But how I can call checkAuth without pushing on button  var GuestMenu   Vue extend       props    username    password        template             lt div id  quot auth quot  gt               lt form class  quot form-inline pull-right quot  gt                   lt div class  quot form-group quot  gt                       lt label class  quot sr-only quot  for  quot UserName quot  gt User name lt  label gt                     lt input type  quot username quot  v-model  quot username quot  class  quot form-control quot  id  quot UserName quot  placeholder  quot username quot  gt                   lt  div gt                   lt div class  quot form-group quot  gt                     lt label class  quot sr-only quot  for  quot Password quot  gt Password lt  label gt                     lt input type  quot password quot  v-model  quot password quot  class  quot form-control quot  id  quot Password quot  placeholder  quot Password quot  gt                   lt  div gt                 lt button type  quot submit quot  class  quot btn btn-default quot  v-on click prevent  quot sendLoginInfo   quot  gt LOGIN lt  button gt                 lt button type  quot submit quot  class  quot btn btn-default quot  v-on click prevent  quot checkAuth   quot  gt CheckAuth lt  button gt               lt  form gt           lt  div gt         methods               hash key-value         sendLoginInfo  sendLoginInfo     key  anyname    value - gt  calling function name  from separate file                      calling without brackets because we do need return from function  we need just function         checkAuth  checkAuth    restore authorization after refresh page if user already have session             I tried to call it s from App  App   new Vue      App -- is need for overwrite global var  Global var need declarated abobe all function  because some it s function is calling from outside         el    app           data                topMenuView   quot guestmenu quot               contentView   quot guestcontent quot               username   quot  quot               password   quot  quot                       ready  function                 checkAuth       Here                     But it s look like it s calling when not all components are loaded  function checkAuth            we should NOT send any data like  loginData because after refreshing page        all filds are empty and we need to ask server if he have authorize session      console log  quot Checking if user already have active session quot         this  http post  http   127 0 0 1 8080 checkAuthorization   then function response                console log  quot server response   quot   response data                                Here I am getting error  authorization js 69 Uncaught TypeError  Cannot read property  post  of undefined I tried to do               methods      hash key-value       sendLoginInfo   sendLoginInfo     key  anyname    value - gt  calling function name  from separate file           calling without brackets because we do need return from function  we need just function             ready               checkAuth                   But again got error  Uncaught TypeError  Cannot read property  post  of undefined What I am doing wrong

User · Answer

You import the function from outside the main instance, and don't add it to the methods block. so the context of this is not the vm.

Either do this:

ready() {
  checkAuth.call(this)
}

or add the method to your methods first (which will make Vue bind this correctly for you) and call this method:

methods: {
  checkAuth: checkAuth
},
ready() {
  this.checkAuth()
}

User · Answer

You can use the mounted   Vue Lifecycle Hook  This will allow you to call a method before the page loads   This is an implementation example   HTML    lt div id  app  gt     lt h1 gt Welcome our site    name    lt  h1 gt   lt  div gt    JS   var app   new Vue        el    app       data            name                mounted  function             this askName      Calls the method before page loads            methods               Declares the method         askName  function                this name   prompt  What s your name                         This will get the prompt method s value  insert it in the variable name and output in the DOM after the page loads  You can check the code sample here   You can read more about Lifecycle Hooks here

User · Answer

Vue watch   life-cycle hook  can be used  html   lt div id  demo  gt    fullName    lt  div gt    js  var vm   new Vue     el    demo     data        firstName   Foo       lastName   Bar       fullName   Foo Bar         watch        firstName  function  val          this fullName   val         this lastName            lastName  function  val          this fullName   this firstName         val

User · Answer

If you need run code after 100  loaded with image and files  test this in mounted     document onreadystatechange        gt      if  document readyState     complete         console log  Page completed with image and files           fetch to next page or some code         More info  MDN Api onreadystatechange

User · Answer

Let see mounted   I think it is help  https   vuejs org v2 api  mounted

User · Answer

vue js provides us  mounted     this means  onload  in javascript   mounted           we can implement any method here like    sampleFun               this is the sample method you can implement whatever you want

[vue.js] Vue.JS: How to call function after page loaded?

Examples related to vue.js