Sayfa yüklemede vue.js işlevi nasıl çağrılır

Verileri filtrelemeye yardımcı olan bir işlevim var. v-on:changeBir kullanıcı seçimi değiştirdiğinde kullanıyorum , ancak işlevin kullanıcı verileri seçmeden önce çağrılmasına da ihtiyacım var. Daha AngularJSönce kullanarak da aynısını yaptım ng-initama anladım ki böyle bir direktif yokvue.js

Bu benim işlevim:

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

Gelen bladedosyanın Ben filtreleri gerçekleştirmek için bıçak formları kullanabilirsiniz:

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

Bu, belirli bir öğeyi seçtiğimde iyi çalışıyor. Sonra tüm diyelim ki tıklarsam all floorsişe yarıyor. İhtiyacım olan şey, sayfa yüklendiğinde, boş girişle getUnitsgerçekleştirecek yöntemi $http.postçağırmasıdır. Arka uçta, isteği, giriş boşsa tüm verileri verecek şekilde ele aldım.

Bunu içinde nasıl yapabilirim vuejs2?

Kodum : http://jsfiddle.net/q83bnLrx

Bu işlevi bir Vue bileşeninin beforeMount bölümünde çağırabilirsiniz : aşağıdaki gibi:

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

Çalışma keman: https://jsfiddle.net/q83bnLrx/1/

Vue'nun sağladığı farklı yaşam döngüsü kancaları vardır:

Birkaç tane listeledim:

1. beforeCreate : Örnek başlatıldıktan sonra, veri gözlemi ve olay / izleyici kurulumundan önce eşzamanlı olarak çağrılır.
2. oluşturuldu : Örnek oluşturulduktan sonra eşzamanlı olarak çağrılır. Bu aşamada, örnek seçenekleri işlemeyi bitirmiştir, bu da aşağıdakilerin ayarlandığı anlamına gelir: veri gözlemi, hesaplanan özellikler, yöntemler, izleme / olay geri aramaları. Ancak, montaj aşaması başlamadı ve $ el özelliği henüz kullanılamayacak.
3. beforeMount : Montaj başlamadan hemen önce çağrılır: render işlevi ilk kez çağrılmak üzere.
4. mount : Örnek henüz monte edildikten sonra çağrılır, burada el yeni oluşturulan ile değiştirilir vm.$el.
5. beforeUpdate : Sanal DOM yeniden oluşturulmadan ve yama uygulanmadan önce veri değiştiğinde çağrılır.
6. güncellenmiş : Bir veri değişikliğinden sonra çağrılır, sanal DOM'un yeniden oluşturulmasına ve yama uygulanmasına neden olur.

Tam listeye buradan göz atabilirsiniz .

Hangi kancanın size en uygun olduğunu seçebilir ve yukarıda verilen örnek kod gibi işlev görmeniz için onu bağlayabilirsiniz.

Bunun gibi bir şey yapmanız gerekiyor (Yöntemi sayfa yüklemede çağırmak istiyorsanız):

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

bunu kullanarak da yapabilirsiniz mounted

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

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

Zaman sakının mountedolay bir bileşeni üzerinde ateşlenir DOM henüz nihai olmayabilir bu yüzden, tüm Vue bileşenleri henüz değiştirilir.

DOM onloadolayını gerçekten simüle etmek için , yani DOM hazır olduktan sonra ancak sayfa çizilmeden önce tetiklemek için , vm. $ NextTick'i içeriden kullanın mounted:

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

Dizi halinde veri alırsanız aşağıdaki gibi yapabilirsiniz. Benim için çalıştı

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