[解決済み] ページロード時に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

どのように解決するのですか？

この関数は マウント前 セクションで呼び出すことができます。

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

動くフィドル https://jsfiddle.net/q83bnLrx/1/

Vueが提供するライフサイクルフックには様々なものがあります。

いくつかリストアップしてみました。

1. 作成前 : インスタンスが初期化された直後、データ観測とイベント/ウォッチャー設定の前に同期的に呼び出されます。
2. 作成された : インスタンスが生成された後に同期的に呼び出されます。この段階で、インスタンスはオプションの処理を終了しています。つまり、データ観測、計算プロパティ、メソッド、ウォッチ/イベント・コールバックが設定されていることを意味します。ただし、マウント・フェーズは開始されておらず、$el プロパティはまだ利用可能ではありません。
3. マウント前 : マウントが始まる直前に呼び出されます：レンダー関数が初めて呼び出されるところです。
4. マウント : インスタンスがマウントされた後に呼び出され、el は新しく作成された vm.$el .
5. 更新前 : データが変更されたとき、仮想DOMが再レンダリングされパッチが適用される前に呼び出されます。
6. 更新 : データ変更により仮想 DOM が再レンダリングされ、パッチが適用された後に呼び出されます。

完全なリストを見ることができます はこちら .

どのフックが最適かを選択し、上記のサンプルコードのように関数を呼び出すようにフックすることができます。