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

如果一切那么你的数据应该是反应性。