Bagaimana memanggil fungsi vue.js saat pemuatan halaman

Saya memiliki fungsi yang membantu memfilter data. Saya menggunakan v-on:changeketika pengguna mengubah pilihan tetapi saya juga membutuhkan fungsi untuk dipanggil bahkan sebelum pengguna memilih data. Saya telah melakukan hal yang sama dengan AngularJSpenggunaan sebelumnya ng-inittetapi saya mengerti bahwa tidak ada arahan seperti itu divue.js

Inilah fungsi saya:

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

Di bladefile saya menggunakan formulir pisau untuk melakukan filter:

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

Ini berfungsi dengan baik saat saya memilih item tertentu. Kemudian jika saya mengklik semua katakanlah all floors, itu berhasil. Yang saya butuhkan adalah ketika halaman dimuat, itu memanggil getUnitsmetode yang akan melakukan $http.postdengan input kosong. Di backend saya telah menangani permintaan dengan cara yang jika inputnya kosong maka akan memberikan semua data.

Bagaimana saya bisa melakukan ini vuejs2?

Kode Saya: http://jsfiddle.net/q83bnLrx

Anda dapat memanggil fungsi ini di bagian beforeMount pada komponen Vue: seperti berikut:

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

Biola kerja: https://jsfiddle.net/q83bnLrx/1/

Ada berbagai kait siklus hidup yang disediakan Vue:

Saya telah mencantumkan beberapa di antaranya:

1. beforeCreate : Dipanggil secara sinkron setelah instance baru saja diinisialisasi, sebelum observasi data dan penyiapan acara / pengamat.
2. dibuat : Dipanggil secara sinkron setelah instance dibuat. Pada tahap ini, instance telah selesai memproses opsi yang berarti berikut ini telah disiapkan: observasi data, properti yang dihitung, metode, callback jam tangan / peristiwa. Namun, fase pemasangan belum dimulai, dan properti $ el belum tersedia.
3. beforeMount : Dipanggil tepat sebelum pemasangan dimulai: fungsi render akan dipanggil untuk pertama kalinya.
4. mount : Dipanggil setelah instance baru saja dipasang di mana el diganti dengan yang baru dibuat vm.$el.
5. beforeUpdate : Dipanggil saat data berubah, sebelum DOM virtual dirender ulang dan ditambal.
6. diperbarui : Dipanggil setelah perubahan data menyebabkan DOM virtual dirender ulang dan ditambal.

Anda dapat melihat daftar lengkapnya di sini .

Anda dapat memilih hook mana yang paling cocok untuk Anda dan mengaitkannya untuk memanggil Anda berfungsi seperti kode contoh yang diberikan di atas.

Anda perlu melakukan sesuatu seperti ini (Jika Anda ingin memanggil metode saat memuat halaman):

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

Anda juga bisa melakukan ini dengan menggunakan mounted

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

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

Berhati-hatilah ketika mountedevent dijalankan pada sebuah komponen, belum semua komponen Vue diganti, jadi DOM mungkin belum final.

Untuk benar-benar mensimulasikan onloadkejadian DOM , yaitu untuk diaktifkan setelah DOM siap tetapi sebelum halaman digambar, gunakan vm. $ NextTick dari dalam mounted:

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

Jika Anda mendapatkan data dalam bentuk array, Anda dapat melakukan seperti di bawah ini. Ini berhasil untuk saya

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