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

猿凯2020-03-10

我有一个有助于过滤数据的功能。我在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

梅老丝2020/03/10 11:40:32

请注意，当在mounted组件上触发事件时，尚未替换所有Vue组件，因此DOM可能不是最终的。

要真正模拟DOM onload事件，即在DOM准备就绪后但在绘制页面之前触发，请从内部使用vm。$ nextTickmounted：

mounted: function () {
  this.$nextTick(function () {
    // Will be executed when the DOM is ready
  })
}

小小2020/03/10 11:40:32

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

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

理查德Itachi2020/03/10 11:40:32

您可以在Vue组件的beforeMount部分中调用此函数：

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

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

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

我列出的几个是：

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

您可以在这里查看完整列表。

您可以选择最适合您的钩子，然后像上面提供的示例代码一样，通过钩子调用您的函数。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer