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

Question

我有一个帮助过滤数据的功能。当用户更改 selection 时，我正在使用 v-on:change，但我还需要在用户 selects 数据之前调用该函数。我以前使用 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>

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

如何在 vuejs2 中执行此操作？

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

Answer 1

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

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

工作fiddle：https://jsfiddle.net/q83bnLrx/1/

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

我列出的几个是：

beforeCreate：在实例刚刚初始化之后，数据观察和event/watcher设置之前同步调用。
created：实例创建后同步调用。在此阶段，实例已完成对选项的处理，这意味着已设置以下内容：数据观察、计算属性、方法、watch/event 回调。但是，挂载阶段还没有开始，$el 属性还不可用。
beforeMount: 挂载前调用：render函数即将第一次调用
mounted：实例刚挂载后调用，其中el被新创建的vm.$el.
beforeUpdate：当数据改变时调用，在虚拟DOM被重新渲染和修补之前。
updated：在数据更改导致虚拟 DOM 重新渲染和修补后调用。

您可以查看完整列表here。

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

Answer 2

你需要做这样的事情（如果你想在页面加载时调用该方法）：

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

Answer 3

您也可以使用 mounted

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

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

Answer 4

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

要真正模拟 DOM onload 事件，即在 DOM 准备好但页面绘制之前触发，请使用 vm.$nextTick from inside mounted:

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

Answer 5

如果你在数组中获取数据，你可以像下面那样做。它对我有用

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

Answer 6

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

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

How to call a vue.js function on page load

javascript

vue.js

vuejs2