web-dev-qa-db-ja.com

ページロード時にvue.js関数を呼び出す方法

データを絞り込む機能を持っています。ユーザーが選択を変更するときはv-on:changeを使用していますが、ユーザーがデータを選択する前にも関数を呼び出す必要があります。以前はng-initを使用していたAngularJSでも同じことを実行しましたが、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と言うことができ、それは動作します。私が必要なのは、ページがロードされたときに、空の入力で$http.postを実行するgetUnitsメソッドを呼び出すことです。バックエンドでは、入力が空の場合にすべてのデータを返すようにリクエストを処理しました。

どうすればvuejs2でこれを行うことができますか？

私のコード： http://jsfiddle.net/q83bnLrx

javascriptvue.jsvuejs2
62
Phillis Peters

この関数はVueコンポーネントの beforeMount セクションで呼び出すことができます。

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

作業フィドル： https://jsfiddle.net/q83bnLrx/1/

Vueにはさまざまなライフサイクルフックがあります。

私は少数を挙げました：

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

ここで完全なリスト を見ることができます 。

どのフックが自分に最も適しているかを選択し、それをフックして上記のサンプルコードのように機能させることができます。

131
Saurabh

あなたはこのようなことをする必要があります（あなたがページロードでメソッドを呼びたいなら）：

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

mountedを使ってこれを行うこともできます

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

....
methods:{
    getUnits: function() {...}
},
mounted: function(){
    this.$nextTick(this.getUnits)
}
....
1
Bernard 'Beta Berlin' Parah