Як викликати функцію vue.js при завантаженні сторінки

У мене є функція, яка допомагає фільтрувати дані. Я використовую, 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

Ви можете викликати цю функцію в розділі beforeMount компонента Vue: наприклад:

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

Робоча скрипка: https://jsfiddle.net/q83bnLrx/1/

Існують різні гачки життєвого циклу, які надає Vue:

Я перерахував кілька таких:

1. beforeCreate : Викликається синхронно після того, як екземпляр щойно був ініціалізований, перед спостереженням даних та налаштуванням подій / спостерігачів.
2. created : Викликається синхронно після створення екземпляра. На цьому етапі екземпляр закінчив обробку параметрів, а це означає, що було налаштовано наступне: спостереження даних, обчислювані властивості, методи, зворотні виклики перегляду / події. Однак фаза монтажу ще не розпочата, і властивість $ el ще не буде доступною.
3. beforeMount : Викликається безпосередньо перед початком монтажу: функція візуалізації збирається викликати вперше.
4. mount : Викликається після того, як екземпляр був щойно змонтований, де el замінено на щойно створений vm.$el.
5. beforeUpdate : Викликається при зміні даних перед тим, як віртуальний DOM буде повторно відтворений і виправлений.
6. оновлено : Виклик після зміни даних призводить до того, що віртуальний DOM повторно відтворюється та виправляється.

Повний список можна переглянути тут .

Ви можете вибрати, який гачок вам найбільше підходить, і зачепити його, щоб викликати вас функцією, як зразок коду, наведений вище.

Вам потрібно зробити щось подібне (якщо ви хочете викликати метод при завантаженні сторінки):

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

Ви також можете зробити це за допомогою mounted

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

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

Пам'ятайте, що коли mountedподія запускається на компонент, ще не всі компоненти Vue замінюються, тому DOM може ще не остаточним.

Щоб дійсно імітувати onloadподію DOM , тобто запускати після того, як DOM буде готовий, але перед тим, як буде намальована сторінка, використовуйте vm. $ NextTick зсередини mounted:

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>