title: Vue.JS: How to call function after page loaded?
body: <p>I have got next Vue component.
  <code>Login</code> as calling Login function.
  <code>checkAuth</code> -- is calling checking Authorization status between page refresh.</p>
  <p>But how I can call <code>checkAuth</code> without pushing on button?</p>
  <pre class="lang-js prettyprint-override"><code>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!
      }
  });
  </code></pre>
  <p>I tried to call it's from App:</p>
  <pre class="lang-js prettyprint-override"><code>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
  
          }
      }
  )
  </code></pre>
  <p>But it's look like it's calling when not all components are loaded,</p>
  <pre class="lang-js prettyprint-override"><code>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)
          }
      }
      // ...
  }
  </code></pre>
  <p>Here I am getting error:</p>
  <p><code>authorization.js:69 Uncaught TypeError: Cannot read property 'post' of undefined</code></p>
  <p>I tried to do:</p>
  <pre class="lang-js prettyprint-override"><code>{
  // ...
      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()
      }
  // ...
  }
  </code></pre>
  <p>But again got error:
  <code>Uncaught TypeError: Cannot read property 'post' of undefined</code></p>
  <p>What I am doing wrong?</p>