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

问题描述

我有一个功能可以帮助过滤数据.当用户更改选择时，我正在使用 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) {控制台日志(响应数据)；this.units = response.data;}, 函数(响应){控制台日志(响应)});}

在 blade 文件中，我使用刀片形式来执行过滤器:

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

当我选择特定项目时，这很有效.然后，如果我点击所有让我们说all floor，它就可以工作.我需要的是当页面加载时，它调用 getUnits 方法，该方法将使用空输入执行 $http.post .在后端，我以一种方式处理请求，如果输入为空，它将提供所有数据.

我如何在 vuejs2 中做到这一点?

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

解决方案

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

<代码> ....方法:{getUnits:函数(){...}},之前挂载(){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 重新渲染并且已修补.

您可以在此处查看完整列表.

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

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

This is my function:

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>

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.

How can I do this in vuejs2?

My Code: http://jsfiddle.net/q83bnLrx

解决方案

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

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

Working fiddle: https://jsfiddle.net/q83bnLrx/1/

There are different lifecycle hooks Vue provide:

I have listed few are :

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