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

dvtswwa3  于 2022-11-25  发布在  Vue.js
关注(0)|答案(7)|浏览(288)

我有一个帮助过滤数据的函数。当用户改变选择时,我使用v-on:change,但我还需要在用户选择数据之前调用该函数。我以前使用ng-initAngularJS做过同样的操作,但我知道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

l7mqbcuq

l7mqbcuq1#

您可以在Vue组件的beforeMount部分调用此函数:如下所示:

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

工作提琴:https://jsfiddle.net/q83bnLrx/1/
Vue提供了不同的生命周期挂钩:
我所列举的几个是:
1.创建之前:在示例刚初始化之后、数据观察和事件/观察器设置之前同步调用。

  1. created:在创建示例后同步调用。在此阶段,示例已完成对选项的处理,这意味着已设置以下各项:数据观察、计算属性、方法、监视/事件回调。但是,安装阶段尚未开始,$el属性也将不可用。
    1.装载前:就在装载开始之前调用:render函数将被第一次调用。
  2. mounted:在示例刚装入之后调用,其中el被新创建的vm.$el替换。
    1.更新前:当数据变更时,在重新呈现和修补虚拟DOM之前呼叫。
  3. updated:在数据更改导致虚拟DOM重新呈现和修补后调用。
    您可以在这里查看完整的列表。
    您可以选择最适合您的钩子,并像上面提供的示例代码那样将其挂钩以调用您的函数。
gupuwyp2

gupuwyp22#

您需要执行如下操作(如果您希望在页面加载时调用该方法):

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

yb3bgrhw3#

您也可以使用mounted执行此操作
https://v2.vuejs.org/v2/guide/migration.html#ready-replaced

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

v6ylcynt4#

请注意,当在组件上触发mounted事件时,并不是所有的Vue组件都被替换,因此DOM可能还不是最终的。
要真正模拟DOM onload事件,即在DOM准备就绪后但在绘制页面之前触发,请从mounted内部使用vm.$nextTick:

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

inb24sb25#

如果你在数组中得到数据,你可以像下面这样做。

<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>
rkkpypqq

rkkpypqq6#

methods: {
  methodName() {
    fetch("url").then(async(response) => {
      if (response.status === 200) {
        const data = await response.json();
        this.xy = data.data;
        console.log("Success load");
      }
    })
  }
}
atmip9wb

atmip9wb7#

您可以使用created()方法来完成它。它将在页面完全加载后触发。

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

相关问题