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

我有一个帮助过滤数据的函数。当用户更改选择时，我正在使用

v-on:change

，但我还需要在用户选择数据之前调用该函数。我以前也使用过

nginit

对

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>

{！！Form:：select（'floor'，$floors，null，['class'=>'Form-control'，占位符'=>'All floors'，v-model'=>'floor'，v-on:change'=>'getUnits（）'）
{！！Form:：select（'unit_type'，$unit_types，null，['class'=>'Form-control'，'placeholder'=>'All unit type'，'v-model'=>'unit_type'，'v-on:change'=>'getUnits（）'）

当我选择一个特定的项目时，它可以正常工作。然后，如果我点击所有，比如说

所有楼层

，它就可以工作了。我需要的是，当加载页面时，它调用

getUnits

方法，该方法将使用空输入执行

$http.post

。在后端，我处理请求的方式是，如果输入为空，它将提供所有数据

如何在

vuejs2

中执行此操作

---

我的代码：

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

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

工作小提琴：

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

我列举了以下几项：

：在实例刚刚初始化之后、数据观察和事件/观察程序设置之前同步调用

：在创建实例后同步调用。在此阶段，实例已完成处理选项，这意味着已设置以下选项：数据观察、计算属性、方法、监视/事件回调。但是，安装阶段尚未开始，$el属性尚未可用

：在装载开始之前调用：即将第一次调用渲染函数

：在刚装入实例后调用，其中el被新创建的

vm.$el

替换

：在重新呈现和修补虚拟DOM之前，当数据更改时调用

：在数据更改导致重新呈现和修补虚拟DOM后调用

你们可以看看完整的清单

---

您可以选择最适合您的钩子，并将其钩住以调用上面提供的示例代码所示的函数。

您需要执行类似操作（如果您希望在页面加载时调用该方法）：

---

您也可以使用

mounted

---

请注意，在组件上触发

mounted

事件时，并非所有Vue组件都会被替换，因此DOM可能还不是最终的

要真正模拟DOM

onload

事件，即在DOM准备就绪但绘制页面之前触发，请从内部使用：

---

若你们得到数组中的数据，你们可以像下面这样做。这对我有用

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

{{id}
从“axios”导入axios；
导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
id:“”，
}
},
安装的（）{
axios（{method:“GET”，“url”：”https://localhost:42/api/getdata“}）。然后（结果=>{
console.log（result.data[0].LoginId）；
this.id=result.data[0].LoginId；
}，错误=>{
控制台错误（error）；
});
},

改为试试

created

。@PhillisPeters您可以使用created或beforeMount。@PhillisPeters您可以添加更多代码，或创建一堆代码。@PhillisPeters请查看更新，我已将http post调用替换为setTimeout for simulation，现在您可以看到数据填充到表中。@GeorgeBitbol请随时更新我的问题是我不知道在mounted（）部分中使用“this”，并且我得到了函数未定义的错误我发现这是我的问题的解决方案，但答案中没有突出显示。OP的问题与我的问题类似吗？添加一个呼叫以解决约束性问题会使这个答案更好吗？

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

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>