Как вызвать функцию 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

ОТВЕТЫ

Ответ 1

Вы можете вызвать эту функцию в разделе beforeMount компонента Vue: например, следующее:

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

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

Существуют различные крючки жизненного цикла. Vue предоставляет:

Я перечислял несколько:

  • beforeCreate: вызывается синхронно после того, как экземпляр только что был инициализирован, перед наблюдением данных и установкой событий/наблюдателей.
  • created: Вызывается синхронно после создания экземпляра. На этом этапе экземпляр завершил обработку опций, что означает следующее: наблюдение данных, вычисленные свойства, методы, обратные вызовы часов/событий. Тем не менее, этап установки не был запущен, и свойство $el еще не доступно.
  • beforeMount: Вызывается непосредственно перед началом монтажа: функция рендеринга будет вызвана в первый раз.
  • mounted: вызывается после того, как экземпляр только что был установлен, где el заменяется вновь созданным vm.$el.
  • beforeUpdate: вызывается, когда данные изменяются, прежде чем виртуальная DOM будет повторно отображена и исправлена.
  • updated: вызывается после изменения данных заставляет виртуальную DOM повторно отображать и исправлять.

Вы можете посмотреть полный список здесь.

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

Ответ 2

Вам нужно сделать что-то вроде этого (если вы хотите вызвать метод на загрузке страницы):

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