VueJS v-bind 屬性在 AJAX 之后沒有立即更新

Question

我有一個表，其中每一行對應一個事件。 每個事件都有一組呈現為跨度元素的時隙，並且每個時隙僅在其stopsales屬性為 true 時被分配na class（使用 v-bind）

從 ajax 請求 ( loadData ) 異步獲取時隙。

我最初調用loadData來渲染我的時間段。 我還使用 2 個按鈕來調用下面的 function 來更改其中一些的 stopsales 屬性：

<div v-for="event in events">
  <label>
    <input type="checkbox" @change="handleEvents(event); " :id="event" 
           :value="event" v-model="selectedEvents">
      {{event.name}}
  </label>
</div>

<button class="btn btn-success" v-on:click="toggle(true);">Activate</button>
<button class="btn btn-danger" v-on:click="toggle(false);">Stop</button>

<td v-for="event in selectedEvents">
  <span v-for="(ev, index, key)  in event.timeslot">
    <span class="label label-default" v-bind:class="{ na: ev.stopsales }"></span>
    <input type="checkbox" :timeslot="ev.timeslotId" 
           v-on:click="addToToggleCheck($event,ev.timeslotId)">
  </span>
</td>


<script>
  const app = new Vue({
    el: '#app',
    data: {
      events: [
        { 
          id: 1, 
          name: "Event 1",                  
        },
        { 
          id: 2, 
          name: "Event 2",                  
        }
      ],
      selectedEvents: [],
      toggleCheck: []
    },
    methods: {
      loadData(event) {
        axios.post(url, {
          event: event.id
        })
        .then(function (response) {
          var response_item = response.data.data[0];
          event.timeslot = response_item.timeslot;
        });
      },
      handleEvents(event) {
        var currentObj = this;
        this.selectedEvents.forEach(function (selectedEvent) {
          if (selectedEvent.id === event.id) {
            currentObj.loadData(event);
          }
        });
      },
      addToToggleCheck(event, timeslotId) {
        if (event.target.checked) {
          this.toggleCheck[timeslotId] = true;
        } else {
           this.toggleCheck[timeslotId] = false;
        }
      },
      toggle(activate){
        var selectedToToggle = [];
        var _this = this;
        for (var key in this.toggleCheck) {
          if (this.toggleCheck[key]) {
            selectedToToggle.push(key);
          }
        }
        axios.post(toggleUrl, {
          evIds: selectedToToggle,
          activate: activate
        })
        .then(function (response) {
          _this.selectedEvents.forEach(function (selectedEvent) {
          _this.loadData(selectedEvent);
        });
      }
    }
  }
</script>

現在奇怪的部分來了。 如果selectedEvents僅包含 1 個事件，當我調用切換function 時， na class 會立即正常應用於跨度元素。

但是，如果selectedEvents包含 2 個事件，當我調用切換function 時， na class 會立即僅應用於其父級是最后選擇的事件的跨度元素。 na class 尚未分配給作為第一個事件的子元素的 span 元素。 但是，如果我在我的表中做任何其他甚至不涉及這兩個功能的事情，例如打開一個模式，那么na class 也適用於這些元素。

這是一些 VueJS 計時問題，其中 DOM 僅在觸發 JS 事件后更新？ 是否有等待在下一個事件觸發器上部署的更改隊列？

Answer 1

您的addToToggleCheck似乎有問題。 使用索引器設置數組值不是被動的（Vue 無法檢測到更改 - 適用於 Vue 2.x）。

替換this.toggleCheck[timeslotId] = true/false; 使用Vue.set(this.toggleCheck, timeslotId, true/false);

閱讀有關Arrays 的更改檢測注意事項

如果你的代碼看起來和你的問題完全一樣，類似的問題是在event.timeslot = response_item.timeslot;上的loadData方法中。 向事件添加新屬性的行 object

閱讀有關對象的更改檢測警告

要么使用Vue.set(event, 'timeslot', response_item.timeslot)要么在數據中引入屬性：

data() {
  return {
      events: [
        { 
          id: 1, 
          name: "Event 1",
          timeslot: {}
        },
        { 
          id: 2, 
          name: "Event 2",                  
          timeslot: {}
        }
      ],
      selectedEvents: [],
      toggleCheck: []
  }
}