ページの読み込み時にvue.js関数を呼び出す方法

Question 1

データのフィルタリングに役立つ機能があります。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、ファイルIは、フィルタを実行するために、ブレードのフォームを使用します。

<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

Question 2

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

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

ワーキングフィドル：https：//jsfiddle.net/q83bnLrx/1/

Vueが提供するさまざまなライフサイクルフックがあります。

私はいくつかをリストしました：

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

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

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

Question 3

次のようなことをする必要があります（ページの読み込み時にメソッドを呼び出したい場合）：

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

Question 4

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

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

....
methods:{
    getUnits: function() {...}
},
mounted: function(){
    this.$nextTick(this.getUnits)
}
....

Question 5

mountedコンポーネントでイベントが発生した場合、すべてのVueコンポーネントがまだ置き換えられていないため、DOMがまだ確定していない可能性があることに注意してください。

本当にDOMシミュレートするために、onloadDOMの準備ができた後でページが描画される前に、使用の火災にイベント、すなわち。VM $ nextTick内側からmounted：

mounted: function () {
  this.$nextTick(function () {
    // Will be executed when the DOM is ready
  })
}

Question 6

配列でデータを取得する場合は、以下のように実行できます。それは私のために働いた

    <template>
    {{ id }}
    </template>
    <script>

    import axios from "axios";

        export default {
            name: 'HelloWorld',
            data () {
                return {
                    id: "",

                }
            },
    mounted() {
                axios({ method: "GET", "url": "https://localhost:42/api/getdata" }).then(result => {
                    console.log(result.data[0].LoginId);
                    this.id = result.data[0].LoginId;
                }, error => {
                    console.error(error);
                });
            },
</script>