Jak wywołać funkcję vue.js podczas ładowania strony

Question

Mam funkcję, która pomaga filtrować dane. Używam v-on:change, gdy użytkownik zmienia zaznaczenie, ale potrzebuję również wywołania funkcji, zanim użytkownik wybierze dane. Zrobiłem to samo z AngularJS uprzednio używając ng-init ale rozumiem, że nie istnieje taka dyrektywa w vue.js

To jest moja funkcja:

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

W pliku blade używam formy ostrzy do wykonywania filtrów :

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

Działa to dobrze, gdy wybiorę konkretną pozycję. Następnie, jeśli kliknę na wszystkie, powiedzmy all floors, to działa. To, czego potrzebuję, to gdy strona jest ładowana, wywołuje metodę getUnits, która będzie wykonywać $http.post z pustym wejściem. W backendie obsłużyłem żądanie w taki sposób, że jeśli dane wejście jest puste, to dostarczy wszystkie dane.

Jak mogę to zrobić w vuejs2?

mój kod: http://jsfiddle.net/q83bnLrx

Answer 1

Można wywołać tę funkcję w beforeMount części składowej Vue: jak następuje:

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

skrzypce robocza: https://jsfiddle.net/q83bnLrx/1/

Istnieją różne haki cyklu życia Vue dostarczają :

Wymieniłem kilka:

1. beforeCreate: Wywoływany synchronicznie po zainicjowaniu instancji, przed obserwacją danych i konfiguracją zdarzeń/obserwatorów.
2. created: Wywoływany synchronicznie po utworzeniu instancji. Na tym etapie instancja zakończyła przetwarzanie opcji, co oznacza, że ​​zostały skonfigurowane: obserwacja danych, obliczone właściwości, metody, wywołania zwrotne zegarka/zdarzenia. Jednakże faza montażu nie została uruchomiona, a właściwość $ el nie będzie jeszcze dostępna.
3. : Wywoływany tuż przed rozpoczęciem montażu: funkcja renderowania ma zostać wywołana po raz pierwszy.
4. mounted: Wywoływany po tym, jak instancja została właśnie zamontowana, gdzie el jest zastąpione nowo utworzonym vm.$el.
5. beforeUpdate: Wywoływane, gdy dane ulegną zmianie, zanim wirtualny DOM zostanie ponownie renderowany i poprawiany.
6. updated: Wywoływany po zmianie danych powoduje, że wirtualny DOM jest ponownie renderowany i poprawiany.

Możesz rzucić okiem na pełną listę here.

Możesz wybrać, który hak jest dla Ciebie najbardziej odpowiedni i podpiąć go, aby zadzwonić do Ciebie, działa jak przykładowy kod podany powyżej.

Answer 2

Trzeba zrobić coś takiego (Jeśli chcesz wywołać metodę na stronie obciążenia):

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