當Ajax更新數據時，無法更新v-for列表

Question

我使用日期選擇器並使用javascript將日期傳遞給vue實例，但在第一次使用v-for呈現列表後，當我調用功能與其他日期，它保持前一個數據顯示。 這裏是我的功能有：

function updateDate(fdate) { 
var datefieldVal = document.getElementById('date').value; 
var locationfieldVal = document.getElementById('location').value; 
if (datefieldVal && locationfieldVal) { 
    var tslot = new Vue({ 
     el: '#time-slots-container', 
     data: { 
      slot: {} 
     }, 
     mounted: function() { 
      this.fetchTimeslot(); 
     }, 
     methods: { 
      fetchTimeslot: function() { 
       var that = this; 
       $.ajax({ 
        type: "GET", 
        url: timeslotApiURL + "?date='" +fdate+ "'", 
        contentType: "application/json;", 
        dataType: "json", 
        success: function (data) { 
         that.slot = JSON.parse(data.d); 


         setTimeout(showTimeSlotAndButton, 500); 
        } 
       }); 

      } 
}); 
} 
} 

人有想法，如何更新使用新的時隙數據V型的名單？謝謝

Answer 1

假設您的數據恢復正常，這可能只是slot不響應。嘗試：

success: function (data) { 
    Vue.set(that.$data, 'slot', JSON.parse(data.d)) 
    ... 

看上面的代碼，你應該避免每次你想更新日期時創建和安裝一個新的實例。我不確定Vue在這種情況下會做什麼，但它可能會失敗，因爲您無法將另一個實例掛載到現有的實例上。

改爲將所有Vue代碼移到updateDate函數之外。

然後，如果你需要，以防止V-從射擊，直到你擁有的數據，只需添加的dateReady數據PARAM這設置爲true，當你完成Ajax請求，即

data: { 
    slot: {}, 
    dateReady: false, 
}, 
... 

success: function (data) { 
    Vue.set(that.$data, 'slot', JSON.parse(data.d)) 
    that.dateReady = true 
    ... 

那麼你可以添加v-if="dateReady"您v-for元素：

<div v-if="dateReady" class="time-slot-row" v-for="hourly in slot.TimeSlot"> 

你如何通過fdate Ajax請求現在處理方式不同，但你可以有這樣的：

var datefieldVal = document.getElementById('date').value; 
 
var locationfieldVal = document.getElementById('location').value; 
 

 
if (!datefieldVal || !locationfieldVal) 
 

 
\t return 
 
    
 
var tslot = new Vue({ 
 
    el: '#time-slots-container', 
 
    data: { 
 
     slot: {}, 
 
     dateReady: false, 
 
    }, 
 
    mounted: function() { 
 
     this.fetchTimeslot(); 
 
    }, 
 
    methods: { 
 
     fetchTimeslot: function() { 
 
      var that = this; 
 
      $.ajax({ 
 
       type: "GET", 
 
       url: timeslotApiURL + "?date='" + that.getDate() + "'", 
 
       contentType: "application/json;", 
 
       dataType: "json", 
 
       success: function(data) { 
 
        that.slot = JSON.parse(data.d); 
 
        that.dateReady = true 
 
        setTimeout(showTimeSlotAndButton, 500); 
 
       } 
 
      }); 
 

 
     }, 
 
     getDate() { 
 
      // whatever you do here 
 
      return '' 
 
     }, 
 
    }, 
 
}) 
 

 
// wherever else you are using this... 
 
tslot.fetchTimeslot()

從本質上講，你將更多的邏輯到Vue公司的情況下，即getDate()如果這是不可能的，那麼你可以設置一個參數去抱着你想獲取日期，使用，在ajax調用並創建一個新的方法來更新它。圍繞它，但方式很多，主要問題是確保你只需要綁定到#time-slots-container元素

Answer 2

這裏VUE的單個實例是V-代碼：

   <div class="time-slots-list-container"> 
       <p class="description"><%=GetGlobalResourceObject("OPTBSRES","SelectedStartTime") %> <span v-if="slot.SelectedSlot==null"><%=GetGlobalResourceObject("OPTBSRES","ToBeSelect") %></span><span v-if="slot.SelectedSlot!=null">{{slot.SelectedSlot}}</span> <%=GetGlobalResourceObject("OPTBSRES","ExamTimeReminderMsg") %></p> 
        <div class="time-slot-row" v-for="hourly in slot.TimeSlot"> 
         <div class="hourly-indicator"><span class="time">{{hourly.Hour}}</span></div> 
         <ul class="time-slots-list"> 
          <li v-for="timeslot in hourly.Slots" class="time-slot" v-bind:class="{'selected': timeslot.Status=='selected', 'unavailable': timeslot.Status =='unavailable', 'active': timeslot.Status=='available'}" v-on:click="updateSelectedSlot(hourly,timeslot), timeslot.Status='selected'"> 
           <span class="time">{{timeslot.Time}}</span> 
           <div class="selected-indicator"><span aria-hidden="true" class=" fa fa-check-circle" aria-hidden="true"></span></div> 
          </li> 
         </ul> 
        </div> 
      </div> 

Answer 3

您需要返回data作爲方法，而不僅僅是一個對象，以便它是被動的。

var tslot = new Vue({ 
    el: '#time-slots-container', 
    data() { 
    return { 
     slot: {} 
    } 
    }, 
    // etc 

您還可以使用this.$http.get({})作爲一個承諾，這將刪除你的整個jQuery的混亂。

然後你就可以用一份豐厚的箭頭=>獲得這個詞彙進入你的諾言，所以你不必繞過上下文（that）

如果一切那麼你的數據應該是反應性。