我有一个帮助过滤数据的函数。当用户改变选择时,我使用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
7条答案
按热度按时间l7mqbcuq1#
您可以在Vue组件的beforeMount部分调用此函数:如下所示:
工作提琴:https://jsfiddle.net/q83bnLrx/1/
Vue提供了不同的生命周期挂钩:
我所列举的几个是:
1.创建之前:在示例刚初始化之后、数据观察和事件/观察器设置之前同步调用。
1.装载前:就在装载开始之前调用:render函数将被第一次调用。
vm.$el
替换。1.更新前:当数据变更时,在重新呈现和修补虚拟DOM之前呼叫。
您可以在这里查看完整的列表。
您可以选择最适合您的钩子,并像上面提供的示例代码那样将其挂钩以调用您的函数。
gupuwyp22#
您需要执行如下操作(如果您希望在页面加载时调用该方法):
yb3bgrhw3#
您也可以使用
mounted
执行此操作https://v2.vuejs.org/v2/guide/migration.html#ready-replaced
v6ylcynt4#
请注意,当在组件上触发
mounted
事件时,并不是所有的Vue组件都被替换,因此DOM可能还不是最终的。要真正模拟DOM
onload
事件,即在DOM准备就绪后但在绘制页面之前触发,请从mounted
内部使用vm.$nextTick:inb24sb25#
如果你在数组中得到数据,你可以像下面这样做。
rkkpypqq6#
atmip9wb7#
您可以使用
created()
方法来完成它。它将在页面完全加载后触发。