如何將此動態ajax函數轉換為vue js

Question

我有一個針對ajax jquery函數，並用於多個進程

<div id="status">
    <div id="waiting"></div>
    <div id="success"></div>
    <div id="warning"></div>
    <div id="reject"></div>
</div>   

<script>
    $( document ).ready(function() {    
        getNotifStatus("waiting","datatable_1");
        getNotifStatus("success","datatable_2");
        getNotifStatus("warning","datatable_3");
        getNotifStatus("reject","datatable_4");
    });
    function getNotifStatus(val,select){    
    $.ajax({
        type: "GET",
        url: '?val='+val+'&select='+select,
        success: function(data){
            $("#"+val).html("");
            $("#"+val).html(data);
        }
    });
    }
    </script>

在jQuery中，我可以使用一個函數來處理多個具有不同值的調用，但是如何在vue中使用它，我嘗試使用vue，但是我認為這只能用於在相同代碼中具有相同值的調用，如果我使用vue，我認為可以通過復制功能並復制具有不同值的代碼。

我使用的這個vue代碼。

<script>
  var app = new Vue({
    el: '#status',
    data: {
      waiting: ''
    }
  })

  app.$http.get('https://example.org/?val=waiting&select=datatable_1')
    .then(function(response) {
      app.waiting= response;
    }, function(error) {
      console.log(error);
    });

</script>

是否可以與動態jquery函數一起使用同一進程？

Answer 1

這不是好事嗎？

為什么要將所有請求都放在一個地方？ 這降低了應用程序的可伸縮性。 您應該將它們分開，以允許添加/刪除功能。

但是，如果必須將它們加載到一個位置，我建議（假設已將4個<div>拆分為多個組件），請不要在組件中使用ajax調用（一次全部使用4個），而應在某個公共父級中使用然后通過屬性傳遞他們的響應。

但是請記住，這是一種反模式。 如果您想制作一個好的，健壯的應用程序，則可以將每個請求保存在單獨的組件中。