Cách gọi hàm vue.js khi tải trang

Tôi có một chức năng giúp lọc dữ liệu. Tôi đang sử dụng v-on:changekhi người dùng thay đổi lựa chọn nhưng tôi cũng cần hàm được gọi ngay cả trước khi người dùng chọn dữ liệu. Tôi đã làm tương tự với AngularJSviệc sử dụng trước đó ng-initnhưng tôi hiểu rằng không có chỉ thị nào như vậy trongvue.js

Đây là chức năng của tôi:

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

Trong bladetệp, tôi sử dụng các biểu mẫu phiến để thực hiện các bộ lọc:

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

Điều này hoạt động tốt khi tôi chọn một mục cụ thể. Sau đó, nếu tôi nhấp vào tất cả cho phép all floors, nó hoạt động. Những gì tôi cần là khi trang được tải, nó sẽ gọi getUnitsphương thức sẽ thực hiện $http.postvới đầu vào trống. Trong phần phụ trợ, tôi đã xử lý yêu cầu theo cách mà nếu đầu vào trống, nó sẽ cung cấp tất cả dữ liệu.

Làm thế nào tôi có thể làm điều này trong vuejs2?

Mã của tôi: http://jsfiddle.net/q83bnLrx

Bạn có thể gọi hàm này trong phần beforeMount của một thành phần Vue: như sau:

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

Làm việc fiddle: https://jsfiddle.net/q83bnLrx/1/

Có các móc vòng đời khác nhau mà Vue cung cấp:

Tôi đã liệt kê một số là:

1. beforeCreate : Được gọi đồng bộ sau khi phiên bản vừa được khởi tạo, trước khi thiết lập quan sát dữ liệu và sự kiện / người xem.
2. đã tạo : Được gọi đồng bộ sau khi cá thể được tạo. Ở giai đoạn này, phiên bản đã xử lý xong các tùy chọn có nghĩa là các tùy chọn sau đã được thiết lập: quan sát dữ liệu, thuộc tính được tính toán, phương thức, lệnh gọi lại theo dõi / sự kiện. Tuy nhiên, giai đoạn gắn kết chưa được bắt đầu và thuộc tính $ el sẽ chưa khả dụng.
3. beforeMount : Được gọi ngay trước khi quá trình gắn bắt đầu: hàm kết xuất sắp được gọi lần đầu tiên.
4. mount : Được gọi sau khi instance vừa được mount trong đó el được thay thế bằng phần mới được tạo vm.$el.
5. beforeUpdate : Được gọi khi dữ liệu thay đổi, trước khi DOM ảo được kết xuất lại và vá.
6. cập nhật : Được gọi sau khi thay đổi dữ liệu khiến DOM ảo được kết xuất lại và vá.

Bạn có thể xem danh sách đầy đủ ở đây .

Bạn có thể chọn móc nào phù hợp với mình nhất và móc nó để gọi cho bạn chức năng như mã mẫu đã cung cấp ở trên.

Bạn cần làm như sau (Nếu bạn muốn gọi phương thức khi tải trang):

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

bạn cũng có thể làm điều này bằng cách sử dụng mounted

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

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

Hãy lưu ý rằng khi mountedsự kiện được kích hoạt trên một thành phần, không phải tất cả các thành phần Vue đều được thay thế, vì vậy DOM có thể chưa phải là cuối cùng.

Để thực sự mô phỏng onloadsự kiện DOM , tức là để kích hoạt sau khi DOM sẵn sàng nhưng trước khi trang được vẽ, hãy sử dụng vm. $ NextTick từ bên trong mounted:

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

Nếu bạn nhận được dữ liệu trong mảng, bạn có thể làm như dưới đây. Nó làm việc cho tôi

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