javascript - Data dalam Vue diperoleh melalui Ajax, dan kemudian Vue dijadikan instantiated. Bagaimana untuk mengawal permintaan Ajax untuk dilaksanakan dahulu selepas halaman dimuatkan, dan kemudian nyatakan Vue selepas permintaan itu berjaya?

Question

Data dalam Vue diperoleh melalui Ajax, dan kemudian Vue dijadikan instantiated.
Bagaimana untuk mengawal permintaan Ajax untuk dilaksanakan terlebih dahulu selepas halaman dimuatkan, dan kemudian membuat seketika Vue selepas permintaan itu berjaya?

Answer 1

Acara onload terikat kepada permintaan Ajax, dan Vue dibuat seketika dalam panggilan balik yang berjaya.

Answer 2

Saya melihat soalan yang sama di Baidu semalam
Saya ingin bertanya dari mana ia datang?

Nak tahu kenapa anda buat begini?

Jawapan saya ialah: Ini tidak disyorkan.

Answer 3

Anda boleh meminta dalam dicipta,

Sebaik-baiknya jangan biarkan halaman menunggu permintaan, jika tidak, ia akan kosong,

Apabila membuat, jika anda masih tidak dapat mendapatkan hasilnya selepas dipasang, anda boleh meminta animasi pemuatan

Jangan biarkan halaman menunggu permintaan sebelum rendering Jika kelajuan Internet pengguna tidak baik dan animasi pemuatan tidak dilihat tetapi kosong, perkara pertama yang anda akan fikirkan adalah masalah dengan laman web terdapat animasi memuatkan, anda akan tahu bahawa ia sedang menunggu permintaan

Gunakan animasi pemuatan untuk memudahkan pengguna memahami

Answer 4

$.ajax({
    url: "...", 
    ...
    success: function(){
        active();
    }
});

function active(){
     let app=new Vue({
        data:{
        },
        ...
    })
}

Tunggu sahaja sehingga permintaan berjaya, kemudian laksanakan fungsi dan buat seketika vue!

Answer 5

Sebenarnya, ini adalah keperluan yang sangat biasa.

Vue boleh dibuat seketika pada kali pertama, pada masa ini data可以没有值，界面上展示loading或"正在加载"之类的提示，同时在实例的created钩子中发起数据请求，得到数据后给实例赋值就行了，vm.data = ajaxData.

Answer 6

$(document).ready(function() {
    $.ajax({
        type: "get",
        async: false,
        url: '',
        dataType: "JSONP",
        beforeSend: function(){
            $("#content .loading").html("数据加载中<img class='loading-gif' src='images/loading.gif'/>");
        },
        success: function (data) {
            if(data.orders.length != 0){
                $("#content .loading").empty();
                // 实例化
            }
            else{
                $("#content .loading").html("暂时没有你的数据哦");
            }
        },
        error: function (message) {
            $("#content .loading").html("数据请求失败，请稍候再试");
        }
    });
});

$(document).ready() bermaksud melaksanakan fungsi di dalam selepas halaman dimuatkan.
Tulis beberapa gesaan pemuatan dalam beforeSend of jquery ajax Jika kejayaan mengosongkan gesaan, maka jika ada data, ia akan segerakan jika tiada data, ia juga akan memberikan gesaan untuk permintaan ralat. Ini adalah yang baru saya tulis semasa latihan saya baru-baru ini.

Answer 7

Ini bukan isu teknikal, ini isu reka bentuk produk Mungkin anda perlu bertanya kepada produk anda mengapa ia mempunyai reka bentuk sedemikian.