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

Question

我有一个帮助过滤数据的功能。当用户更改选择时，我正在使用 v-on:change，但我还需要在用户选择数据之前调用该函数。我以前使用 ng-init 对 AngularJS 做过同样的事情，但我知道 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 文件中，我使用 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

你可以在beforeMount中调用这个函数Vue 组件的一部分:如下所示:

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

工作 fiddle :https://jsfiddle.net/q83bnLrx/1/

Vue 提供了不同的生命周期钩子(Hook):

我列出的几个是:

1. beforeCreate : 在实例刚刚初始化之后同步调用，在数据观察和事件/观察者设置之前。
2. created : 实例创建后同步调用。在此阶段，实例已完成对选项的处理，这意味着已设置以下内容:数据观察、计算属性、方法、监视/事件回调。但是，安装阶段尚未开始，$el 属性尚不可用。
3. beforeMount : 挂载开始前调用:即将第一次调用render函数。
4. mounted : 在实例刚刚挂载后调用，其中 el 被新创建的 vm.$el 替换。
5. beforeUpdate :在数据更改时调用，在重新渲染和修补虚拟 DOM 之前。
6. updated :在数据更改导致虚拟 DOM 重新呈现和修补后调用。

您可以查看完整列表here .

您可以选择最适合您的钩子(Hook)并钩住它来调用您的函数，就像上面提供的示例代码一样。