如何在页面加载时调用vue.js函数 [英] How to call a vue.js function on page load

问题描述

我有一个帮助过滤数据的功能。我正在使用 v-on：当用户更改选择时更改但我还需要在用户选择数据之前调用该函数。我已经使用 AngularJS 以前使用 ng-init 做了同样的事情但我明白在 vue.js

I have a function that helps filter data. I am using v-on:change 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 AngularJS previously using ng-init but I understand that there is no such a directive in 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)
        });
    }

在刀片文件我使用刀片表单来执行过滤器：

In the blade file I use blade forms to perform the filters:

<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>

当我选择特定商品时，此功能正常。然后，如果我点击所有让我们说所有楼层，它就可以了。我需要的是当页面加载时，它调用 getUnits 方法，该方法将执行 $ http.post 空输入。在后端，我已经处理了请求，如果输入为空，它将提供所有数据。

This works fine when I select a specific item. Then if I click on all lets say all floors, it works. What I need is when the page is loaded, it calls the getUnits method which will perform the $http.post 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.

如何在 vuejs2 中执行此操作？

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

推荐答案

您可以在 beforeMount 中调用此功能Vue组件的一部分：如下所示：

You can call this function in beforeMount section of a Vue component: like following:

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

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

Vue提供不同的生命周期钩子：

There are different lifecycle hooks Vue provide:

我列出的几个是：

1. beforeCreate ：刚刚初始化实例后同步调用，数据阻塞之前ervation和event / watcher setup。


2. 创建：在创建实例后同步调用。在此阶段，实例已完成处理选项，这意味着已设置以下内容：数据观察，计算属性，方法，监视/事件回调。但是，安装阶段尚未开始，$ el属性尚不可用。


3. beforeMount ：在安装开始之前调用：渲染函数即将首次调用。


4. 已安装：刚安装实例后调用，其中el由新创建的 vm替换。$ el 。


5. beforeUpdate ：在重新呈现和修补虚拟DOM之前调用数据。


6. 更新：在数据更改后调用导致虚拟DOM重新渲染和修补。

1. beforeCreate: Called synchronously after the instance has just been initialized, before data observation and event/watcher setup.
2. created: Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.
3. beforeMount: Called right before the mounting begins: the render function is about to be called for the first time.
4. mounted: Called after the instance has just been mounted where el is replaced by the newly created vm.$el.
5. beforeUpdate: Called when the data changes, before the virtual DOM is re-rendered and patched.
6. updated: Called after a data change causes the virtual DOM to be re-rendered and patched.

您可以查看此处的完整列表。

You can have a look at complete list here.

您可以选择最适合您的挂钩，并将其挂钩以调用您的功能，如上面提供的示例代码。

You can choose which hook is most suitable to you and hook it to call you function like the sample code provided above.

这篇关于如何在页面加载时调用vue.js函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！