title: How to call a vue.js function on page load
body: <p>I have a function that helps filter data. I am using <code>v-on:change</code> when a user changes the selection but I also need the function to be called even before the user selects the data. I have done the same with <code>AngularJS</code> previously using <code>ng-init</code> but I understand that there is no such a directive in <code>vue.js</code> </p>
  
  <p>This is my function:</p>
  
  <pre><code>getUnits: function () {
          var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};
  
          this.$http.post('/admin/units', input).then(function (response) {
              console.log(response.data);
              this.units = response.data;
          }, function (response) {
              console.log(response)
          });
      }
  </code></pre>
  
  <p>In the <code>blade</code> file I use blade forms to perform the filters:</p>
  
  <pre><code>&lt;div class="large-2 columns"&gt;
          {!! Form::select('floor', $floors,null, ['class'=&gt;'form-control', 'placeholder'=&gt;'All Floors', 'v-model'=&gt;'floor', 'v-on:change'=&gt;'getUnits()' ]) !!}
      &lt;/div&gt;
      &lt;div class="large-3 columns"&gt;
          {!! Form::select('unit_type', $unit_types,null, ['class'=&gt;'form-control', 'placeholder'=&gt;'All Unit Types', 'v-model'=&gt;'unit_type', 'v-on:change'=&gt;'getUnits()' ]) !!}
      &lt;/div&gt;
  </code></pre>
  
  <p>This works fine when I select a specific item. Then if I click on all lets say <code>all floors</code>, it works. What I need is when the page is loaded, it calls the <code>getUnits</code> method which will perform the <code>$http.post</code> with empty input. In the backend I have handled the request in a way that if the input is empty it will give all the data. </p>
  
  <p>How can I do this in <code>vuejs2</code>?</p>
  
  <p>My Code: <a href="http://jsfiddle.net/q83bnLrx" rel="noreferrer">http://jsfiddle.net/q83bnLrx</a> </p>