如何在页面加载时调用vue.js函数

Question

我有一个帮助过滤数据的函数。当用户更改选择时，我正在使用v-on:change，但我还需要在用户选择数据之前调用该函数。我也做了同样用AngularJS以前使用ng-init但据我所知，没有这样的vue.js

这一个指令是我的函数：

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) 
     }); 
    } 

在blade文件我用刀片的形式来执行过滤器：

<div class="large-2 columns"> 
     {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!} 
    </div> 
    <div class="large-3 columns"> 
     {!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!} 
    </div> 

当我选择一个特定的项目时，这工作正常。然后，如果我点击所有可以说all floors，它的作品。我需要的是当页面加载时，它调用getUnits方法，它将执行$http.post空输入。在后端，我处理请求的方式是，如果输入为空，则会提供所有数据。

如何在vuejs2中做到这一点？

我的代码：http://jsfiddle.net/q83bnLrx

Answer 1

你可以调用这个函数在Vue公司组成的beforeMount部分：像以下：

.... 
methods:{ 
    getUnits: function() {...} 
}, 
beforeMount(){ 
    this.getUnits() 
}, 
...... 

工作小提琴：https://jsfiddle.net/q83bnLrx/1/

有不同的生命周期挂钩Vue公司提供：

我列出的几个是：

1. beforeCreate：在实例刚刚初始化之后，在数据观察和事件/观察器设置之前同步调用。
2. created：创建实例后同步调用。在这个阶段，实例已经完成了处理选项，这意味着已经设置了以下内容：数据观察，计算属性，方法，监视/事件回调。但是，安装阶段尚未开始，并且$ el属性将不可用。
3. beforeMount：在安装开始之前调用：渲染函数即将被首次调用。
4. mounted：刚刚装入实例之后调用，其中el由新创建的vm.$el取代。
5. beforeUpdate：在虚拟DOM重新呈现并修补之前，数据发生变化时调用。
6. updated：数据更改后调用导致虚拟DOM被重新渲染和修补。

您可以查看完整列表here。

您可以选择哪个挂钩最适合您，并挂钩它以调用您像上面提供的示例代码一样的功能。

Answer 2

你需要做这样的事情（如果你想打电话页面加载的方法）：

new Vue({ 
    // ... 
    methods:{ 
     getUnits: function() {...} 
    }, 
    created: function(){ 
     this.getUnits() 
    } 
});