120

我有一个帮助过滤数据的功能。我在v-on:change用户更改选择时使用，但我还需要在用户选择数据之前调用该函数。我AngularJS以前使用过同样的方法，ng-init但我知道在中没有这样的指令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

4

5 回答 5

241

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

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

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

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

我列出了几个：

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

您可以在此处查看完整列表。

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

于 2016-11-21T06:57:22.443 回答
32

您需要执行以下操作（如果您想在页面加载时调用该方法）：

new Vue({
    // ...
    methods:{
        getUnits: function() {...}
    },
    created: function(){
        this.getUnits()
    }
});
于 2016-11-21T06:58:34.110 回答
7

您也可以使用mounted

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

....
methods:{
    getUnits: function() {...}
},
mounted: function(){
    this.$nextTick(this.getUnits)
}
....
于 2018-11-13T09:08:08.823 回答
5

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

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

mounted: function () {
  this.$nextTick(function () {
    // Will be executed when the DOM is ready
  })
}
于 2019-08-29T09:48:40.450 回答
1

如果您在数组中获取数据，您可以执行以下操作。它对我有用

    <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>
于 2020-03-16T10:39:01.837 回答