Как вызвать функцию vue.js при загрузке страницы

Question

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

Answer 1

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

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

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

Существует различный жизненный цикл крючки Vue обеспечивает :

Я указал несколько:

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

Полный список here.

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

Answer 2

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

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