ajaxがデータを更新するときにv-forリストを更新できません

Question

私はdatepickerを使用し、javascriptを使用して日付をvueインスタンスに渡しますが、v-forを使用してリストをレンダリングした後、他の日付と同じ機能を実行すると、前の1つのデータが表示されます。ここ は私が持っている機能である：

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関数の外に移動します。

次に、あなたがデータを持ってまで、すなわち

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

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

、ちょうどdateReadyのデータのparamを追加し、Ajaxのリクエストを完了したとき、これをtrueに設定し、発射からV-のためのを防ぐために必要がある場合その後、あなたは自分のv-for要素にv-if="dateReady"を追加することができます。あなたは今、異なる方法で処理されたAJAX要求にfdateを渡す方法

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

が、あなたは持っている可能性があり、何かのように：

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()

基本的に、あなたはそれができないならば、あなたがいることを、あなたが取得したい日付を保持するためのparamを設定し使用することができ、すなわちgetDate()、Vueののインスタンスにロジックの多くを動かします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 

また、あなたの全体jqueryの混乱を削除します約束としてthis.$http.get({})を使用することができます。あなたはすべてのことが、あなたのデータは、反応性でなければならない場合は、コンテキスト（that）

周りを通過する必要はありませんので、

は、その後、あなたは、この字句あなたの約束に入るために脂肪の矢印=>を使用することができます。