วิธีเรียกใช้ฟังก์ชัน 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

คุณสามารถเรียกใช้ฟังก์ชันนี้ใน ส่วนbeforeMountของส่วนประกอบ Vue: ดังต่อไปนี้:

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

การเล่นซอ: https://jsfiddle.net/q83bnLrx/1/

มีตะขอเกี่ยวกับวงจรชีวิตที่แตกต่างกัน Vue ให้:

ฉันมีรายชื่อไม่กี่รายการ ได้แก่ :

1. beforeCreate : เรียกแบบซิงโครนัสหลังจากอินสแตนซ์เพิ่งเริ่มต้นก่อนการสังเกตข้อมูลและการตั้งค่าเหตุการณ์ / ผู้เฝ้าดู
2. สร้าง : เรียกพร้อมกันหลังจากสร้างอินสแตนซ์ ในขั้นตอนนี้อินสแตนซ์ได้เสร็จสิ้นการประมวลผลตัวเลือกซึ่งหมายความว่ามีการตั้งค่าต่อไปนี้: การสังเกตข้อมูลคุณสมบัติที่คำนวณวิธีการโทรกลับของนาฬิกา / เหตุการณ์ อย่างไรก็ตามยังไม่ได้เริ่มขั้นตอนการติดตั้งและคุณสมบัติ $ el จะยังไม่พร้อมใช้งาน
3. beforeMount : เรียกก่อนการติดตั้งจะเริ่มขึ้น: ฟังก์ชันการแสดงผลกำลังจะถูกเรียกใช้เป็นครั้งแรก
4. ติดตั้ง : vm.$elเรียกว่าหลังจากอินสแตนซ์เพิ่งได้รับการติดตั้งที่เอลจะถูกแทนที่ด้วยที่สร้างขึ้นใหม่
5. beforeUpdate : เรียกว่าเมื่อข้อมูลมีการเปลี่ยนแปลงก่อนที่ DOM เสมือนจะแสดงผลและแก้ไขใหม่
6. ปรับปรุง : เรียกว่าหลังจากการเปลี่ยนแปลงข้อมูลทำให้ DOM เสมือนถูก re-re-re-re-and patched

คุณสามารถดูได้ที่รายการที่สมบูรณ์ที่นี่

คุณสามารถเลือกเบ็ดที่เหมาะกับคุณมากที่สุดและขอเกี่ยวเพื่อเรียกใช้งานของคุณเหมือนโค้ดตัวอย่างที่ให้ไว้ด้านบน

คุณต้องทำสิ่งนี้ (หากคุณต้องการเรียกใช้เมธอดในการโหลดหน้าเว็บ):

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

คุณยังสามารถทำได้โดยใช้ mounted

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

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

ระวังว่าเมื่อmountedเกิดเหตุการณ์ในคอมโพเนนต์ส่วนประกอบ Vue ยังไม่ถูกแทนที่ทั้งหมดดังนั้น DOM อาจยังไม่สิ้นสุด

ในการจำลองonloadเหตุการณ์DOM จริงๆกล่าวคือให้เริ่มทำงานหลังจาก DOM พร้อม แต่ก่อนที่จะดึงหน้าให้ใช้vm $ nextTickจากด้านในmounted:

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

หากคุณได้รับข้อมูลในอาร์เรย์คุณสามารถทำได้ดังนี้ มันได้ผลสำหรับฉัน

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