Question

我有一个帮助过滤数据的功能。我在用户更改选择时使用String in = "2016年11月 21日"; // really a space here? SimpleDateFormat sdf1 = new SimpleDateFormat ("yyyy年MM月 dd日"); Date d1 = sdf1.parse(in); SimpleDateFormat sdf2 = new SimpleDateFormat ("dd-MM-yyyy"); System.out.println(sdf2.format(d1));但我还需要在用户选择数据之前调用该函数。我之前使用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中执行此操作？

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

Answer 1

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

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

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

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

我列出的几个是：

beforeCreate：刚刚初始化实例后，在数据观察和事件/观察者设置之前同步调用。
created：创建实例后同步调用。在此阶段，实例已完成处理选项，这意味着已设置以下内容：数据观察，计算属性，方法，监视/事件回调。但是，安装阶段尚未开始，$ el属性尚不可用。
beforeMount：在安装开始之前调用：渲染函数即将首次调用。
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内部使用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>

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

5 个答案: