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

javascript vue.js vuejs2

2022-08-30 04:42:18

我有一个帮助过滤数据的函数。我在用户更改选择时使用，但我还需要在用户选择数据之前调用该函数。我对以前的使用做了同样的事情，但我明白在v-on:changeAngularJSng-initvue.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 floorsgetUnits$http.post

我该怎么做？vuejs2

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

答案 1

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

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

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

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

我列出了几个：

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

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

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

答案 2

您需要执行类似如下操作（如果要在页面加载时调用该方法）：

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