2
我有一個表，其中包含來自多個來源（網站）的信息。每一行都是不同的來源。用戶可以通過單擊刷新圖標刷新每個單獨的行/源/網站的數據，或者，用戶可以通過單擊標題行中的刷新圖標來更新所有行。
刷新時，腳本實際登錄到每個網站並獲取實時數據與從數據庫中獲取陳舊數據。
我希望每行更新爲數據來自用戶單擊標題行中的刷新ALL圖標時。
下面是我如何組織目前的東西。它確實更新了表格，但僅在每一行完成時才更新。
vuejs laravel火花（使用$ http.get） laravel 31年3月5日
...
Vue.component('websites', {
// props: [''],
/**
* The components data
*/
data() {
\t return {
\t \t userLbProfiles: [],
\t \t spin_icon_many: false,
\t \t showRefreshButton: '',
\t \t refreshTime: '',
\t \t busy: '',
\t \t changeStatus: '',
\t };
},
/**
* Bootstrap the component
. */
mounted() {
\t var self = this;
\t this.fetchLastRefreshTime();
\t this.getData();
\t this.busy = false;
\t this.showRefreshButton = true;
},
/**
* Component's methods
*/
methods: {
/**
* get current stored data from the DB
*
* @return response
*/
getData() {
\t this.changeStatus = true;
\t this.$http.get('/get/all/userLbProfiles')
\t .then(function (response) {
\t \t console.log(response);
\t \t this.userLbProfiles = response.data;
\t \t this.busy = false;
\t \t this.spin_icon_many = false;
\t \t this.changeStatus = false;
\t })
},
/**
* get only ONE row from the DB
*
* @return response
*/
getDataForOne(userLbProfileId, i) {
\t this.changeStatus = true;
\t this.$http.get('/get/one/userLbProfile/'+userLbProfileId)
\t .then(function (response) {
\t \t console.log(response);
\t \t this.userLbProfiles[i] = response.data;
console.log(this.userLbProfiles[i]+'number: '+i);
\t \t this.busy = false;
\t \t this.userLbProfiles[i].spin_icon = false;
\t \t this.changeStatus = false;
\t })
},
/**
* Call the api to log into one website and fetch the live data
*
*/
refreshOne(userLbProfileId,i) {
\t this.userLbProfiles[i].spin_icon= true;
\t this.busy = true;
\t this.$http.get('/get/refresh/one'+userLbProfileId)
\t .then(function (response) {
\t \t console.log(response);
\t \t this.getDataForOne(userLbProfileId,i);
\t \t // this.getData();
\t })
},
/**
* Call the api to log into and update the specified # of websites
* next in the list
*
*/
refreshMany() {
\t this.spin_icon_many = true; \t
\t this.busy = true; \t
\t for(i=0; i <= this.userLbProfiles.length-83; i++) { \t \t
\t \t this.userLbProfiles[i].spin_icon= true; \t \t
\t \t this.$http.get('/get/refresh/many'+this.userLbProfiles[i].id)
\t \t .then(function (response) {
\t \t \t console.log('got response after fetching refresh data for: '+this.userLbProfiles[i].id);
\t \t \t console.log(response); \t \t \t \t \t
\t \t });
\t }
},<get-website-data inline-template>
\t <div class="panel panel-default">
\t \t <div class="panel-body">
\t <div class="row">
\t \t <div class="col-md-12">
\t \t \t <form class="form-horizontal" role="form">
\t \t \t \t <table class="table table-hover">
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th>Data Item 1</th>
\t \t \t \t \t \t <th>Data Item 2</th>
\t \t \t \t \t \t <th>
\t \t \t \t \t \t <form>
\t \t \t \t \t \t \t \t <a href=""
\t \t \t \t \t \t \t \t \t @click.prevent="refreshMany()">
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <i v-if="spin_icon_many"
\t \t \t \t \t \t \t \t \t \t class="fa fa-fw fa-refresh fa-spin fa-2x">
\t \t \t \t \t \t \t \t \t </i>
\t \t \t \t \t \t \t \t \t <i v-else
\t \t \t \t \t \t \t \t \t \t class="fa fa-fw fa-refresh fa-2x">
\t \t \t \t \t \t \t \t \t </i>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </form> -->
\t \t \t \t \t \t \t <i class="fa fa-fw fa-refresh fa-2x"> \t \t \t \t \t \t \t
\t \t \t \t \t \t </th>
\t \t \t \t \t \t <th>Last Update</th>
\t \t \t \t \t </tr>
\t \t \t \t \t \t \t <tr v-for="(userLbProfile, index) in userLbProfiles">
\t \t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t \t @{{ dataItem1 }}
\t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t \t @{{ dataItem2 }}
\t \t \t \t \t \t \t \t </td>
etc..與此代碼會發生什麼情況是，（顯然）for循環在我得到任何響應之前運行 。每個請求的範圍從3-15秒。
如果有10個網站，讓我們說，10 Ajax調用出去 但直到所有10個其他非同步調用完成，即使 如果我能看見的第一。然後塊（其中從數據庫調用的getData）不處理響應它在控制檯中打印。
我會認爲，然後將單獨處理 的迴應，但不知何故，他們都知道彼此？ 可能是for循環？
我也打過電話getDataForOne想這可能更新該行 並誘騙更新正確了，但我沒有得到VUE到 認識改變的數據（也許這是採取正確的路線？）
任何幫助非常感謝，這是一個持續數週的問題。
用'getDataForOne'調用來替換循環的內容，這樣邏輯就不會在你的循環中被處理，而是在getDataForOne方法中 – Antony
這個問題就是每個請求需要3-15秒（我更新了我的帖子澄清），所以你的建議將從數據庫運行getData，但該數據還沒有更新，直到異步調用完成。 –