Не удается обновить список v-for, когда ajax обновит данные

Question

Я использую datepicker и используя 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); 
        } 
       }); 

      } 
}); 
} 
} 

Кто-нибудь есть идеи, как обновить клиновой для списка, используя новые данные слот? Спасибо

Answer 1

Предполагая, что ваши данные вернутся правильно, вероятно, именно то, что slot не реагирует. Попытка:

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

Ознакомившись с приведенным выше кодом, вы должны избегать создания и установки нового экземпляра каждый раз, когда хотите обновить дату. Я не уверен, что Vue будет делать в этом сценарии, но он может просто потерпеть неудачу, поскольку вы не можете подключить другой экземпляр к существующему.

Вместо этого переместите весь свой код Vue за пределы функции updateDate.

Тогда, если вам нужно, чтобы предотвратить V-за от стрельбы до тех пор, пока есть данные, просто добавить параметров данных dateReady и установить это верно, когда вы завершили запрос 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

здесь является 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)

Если все, что тогда ваши данные должны быть реактивными.