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

我有一个函数可以帮助过滤数据。当用户改变选择时，我使用 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文件中，我使用刀片形式来执行过滤器:

<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

290490 次浏览
小开
最佳答案

您可以在 Vue 组件的 在登山之前部分中调用这个函数:

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

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

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

我列举了以下几点:

  1. Before Create : 在实例刚刚初始化之后，在数据观察和设置事件/观察者之前同步调用。
  2. Create : 在创建实例后同步调用。在这个阶段，实例已经完成了对选项的处理，这意味着已经设置了以下选项: 数据观察、计算属性、方法、监视/事件回调。但是，安装阶段尚未启动，$el 属性尚未可用。
  3. Before Mount : 在挂载开始之前调用: 呈现函数将首次被调用。
  4. Mount : 在刚刚挂载了实例之后调用，其中 el 被新创建的 vm.$el替换。
  5. Before Update : 在数据更改时，在重新呈现和修补虚拟 DOM 之前调用。
  6. Update : 在数据更改后调用会导致重新呈现和修补虚拟 DOM。

您可以查看完整的列表 给你。

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

小开

您需要这样做(如果您想在页面加载时调用该方法) :

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

您也可以使用 mounted来完成这项工作

Https://v2.vuejs.org/v2/guide/migration.html#ready-replaced

....
methods:{
getUnits: function() {...}
},
mounted: function(){
this.$nextTick(this.getUnits)
}
....
小开

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

要真正模拟 DOM onload事件，也就是说，在 DOM 准备好之后但在绘制页面之前触发，请在 mounted内部使用 $nextTick:

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

如果你得到数组中的数据，你可以像下面这样做。它为我工作

    <template>
\{\{ id }}
</template>
<script>


import axios from "axios";


export default {
name: 'HelloWorld',
data () {
return {
id: "",


}
},
mounted() {
axios({ method: "GET", "url": "https://localhost:42/api/getdata" }).then(result => {
console.log(result.data[0].LoginId);
this.id = result.data[0].LoginId;
}, error => {
console.error(error);
});
},
</script>
小开 
methods: {
methodName() {
fetch("url").then(async(response) => {
if (response.status === 200) {
const data = await response.json();
this.xy = data.data;
console.log("Success load");
}
})
}
}
小开

你可以使用 created()方法。它会触发一次页面完全加载。

 created:function(){
this.fillEditForm();
},

提交答案