关于 javascript:如何在页面加载时调用 vue.js 函数

How to call a vue.js function on page load

我有一个帮助过滤数据的功能。当用户更改选择时,我正在使用 v-on:change 但我还需要在用户选择数据之前调用该函数。我以前使用 ng-initAngularJS 做了同样的事情,但我知道 vue.js

中没有这样的指令

这是我的功能:

1
2
3
4
5
6
7
8
9
10
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 文件中,我使用刀片表单来执行过滤器:

1
2
3
4
        {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
   
   
        {!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}

当我选择一个特定的项目时,这很好用。然后,如果我单击所有让我们说 all floors,它就可以工作。我需要的是当页面加载时,它调用 getUnits 方法,该方法将使用空输入执行 $http.post 。在后端,我以某种方式处理请求,如果输入为空,它将提供所有数据。

如何在 vuejs2 中做到这一点?

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


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

1
2
3
4
5
6
7
8
 ....
 methods:{
     getUnits: function() {...}
 },
 beforeMount(){
    this.getUnits()
 },
 ......

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

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

我列出了几个:

  • beforeCreate:在实例刚刚初始化之后,在数据观察和事件/观察者设置之前同步调用。
  • created:实例创建后同步调用。在这个阶段,实例已经完成了对选项的处理,这意味着已经设置了以下内容:数据观察、计算属性、方法、监视/事件回调。但是,安装阶段尚未开始,$el 属性将不可用。
  • beforeMount:在挂载开始之前调用:即将第一次调用渲染函数。
  • 挂载:在实例刚刚挂载后调用,其中 el 被新创建的 vm.$el 替换。
  • beforeUpdate:在数据发生变化时调用,在重新渲染和修补虚拟 DOM 之前。
  • 更新:在数据更改导致虚拟 DOM 重新渲染和修补后调用。
  • 您可以在此处查看完整列表。

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


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    new Vue({
        // ...
        methods:{
            getUnits: function() {...}
        },
        created: function(){
            this.getUnits()
        }
    });


    你也可以使用 mounted

    来做到这一点

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

    1
    2
    3
    4
    5
    6
    7
    8
    ....
    methods:{
        getUnits: function() {...}
    },
    mounted: function(){
        this.$nextTick(this.getUnits)
    }
    ....

    请注意,当 mounted 事件在组件上触发时,并非所有 Vue 组件都被替换,因此 DOM 可能还不是最终的。

    要真正模拟 DOM onload 事件,即在 DOM 准备好但页面绘制之前触发,请在 mounted:

    内部使用 vm.$nextTick

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

    如果你得到数组中的数据,你可以像下面这样。它对我有用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
        <template>
        {{ id }}
        </template>
       

        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);
                    });
                },