Vue2 Vuetify展开表格对象更新无响应问题求助

问题场景 #

Vuex中存储的对象数组通过v-data-table展示，每个对象包含OfferDetails空数组；点击行展开时调用方法填充OfferDetails数据，DevTools显示数据已更新，但展开行内容未实时刷新，首次展开无变化，关闭重开后才显示新数据。

核心代码片段 #

初始数据结构

{"OfferId": 101581,"VaweStart": "2024-03-28","VaweEnd": "2024-04-10","OfferDetails": []}

更新后数据结构

{"OfferId": 101581,"VaweStart": "2024-03-28","VaweEnd": "2024-04-10","OfferDetails": [[{"OfferId": 101581,"PositionName": "Test","PositionCode": "449455"},{"OfferId": 101581,"PositionName": "Test","PositionCode": "701133"}],[{"OfferId": 101581,"PositionName": "Test","PositionCode": "449455"},{"OfferId": 101581,"PositionName": "Test","PositionCode": "701133"}]]}

v-data-table组件代码

<v-data-table 
  :headers="headers" 
  :items="getPersonalOffersInfo" 
  :expanded.sync="expanded" 
  item-key="OfferId" 
  show-expand 
  class="elevation-1" 
  @click:row="clickRow"
>
  <template v-slot:expanded-item="{ headers, item }">
    <td :colspan="headers.length">
      <v-data-table 
        :items="item.OfferDetails[0]" 
        :headers="subheaders" 
        hide-default-footer
      >
        <template v-slot:item="{ item }">
          <tr>
            <td>{{ item }}</td>
            <td>{{ item.PositionName }}</td>
            <td>{{ item.PositionCode }}</td>
          </tr>
        </template>
      </v-data-table>
    </td>
  </template>
</v-data-table>

Vuex Mutation代码（原问题代码）

setPersonalOffersDetailSQL(state, results) {
  const offerId = results[0].OfferId;
  const objectToFind = state.PersonalOffersInfo.findIndex((i) => i.OfferId === offerId);
  state.PersonalOffersInfo[objectToFind].OfferDetails.splice(0, 0, [...results]);
}

问题原因 #

Vue2的响应式系统依赖对象属性的getter/setter实现追踪，直接修改数组中嵌套对象的属性（如OfferDetails数组）时，虽然splice能触发数组本身的响应式，但嵌套对象的属性更新可能无法被v-data-table的展开组件深度监听；此外，Vuex中直接修改 state 中数组元素的嵌套属性，可能因为没有触发数组的整体更新，导致组件未重新渲染。

解决方案 #

方案1：通过创建新对象/数组触发响应式更新 #

在Vuex Mutation中，替换原数组中的对象为新对象，确保响应式系统能捕捉到变化：

setPersonalOffersDetailSQL(state, results) {
  const offerId = results[0].OfferId;
  const index = state.PersonalOffersInfo.findIndex(i => i.OfferId === offerId);
  if (index !== -1) {
    // 复制原对象并更新OfferDetails数组
    const updatedOffer = {
      ...state.PersonalOffersInfo[index],
      OfferDetails: [[...results], ...state.PersonalOffersInfo[index].OfferDetails]
    };
    // 替换原数组中的元素，触发数组更新
    state.PersonalOffersInfo.splice(index, 1, updatedOffer);
  }
}

方案2：使用Vue.set强制触发响应式 #

利用Vue.set方法手动触发嵌套属性的响应式更新：

import Vue from 'vue';

setPersonalOffersDetailSQL(state, results) {
  const offerId = results[0].OfferId;
  const index = state.PersonalOffersInfo.findIndex(i => i.OfferId === offerId);
  if (index !== -1) {
    const targetOffer = state.PersonalOffersInfo[index];
    // 构造新的OfferDetails数组
    const newOfferDetails = [[...results], ...targetOffer.OfferDetails];
    // 使用Vue.set更新属性，确保响应式
    Vue.set(targetOffer, 'OfferDetails', newOfferDetails);
  }
}

方案3：强制刷新展开行（临时方案） #

若上述方案无效，可在填充数据后手动切换展开状态，强制组件重新渲染：

// 点击行的方法中
async clickRow(item) {
  // 先关闭展开
  this.expanded = this.expanded.filter(id => id !== item.OfferId);
  // 调用填充数据的action
  await this.$store.dispatch('discountcard/setPersonalOffersDetailSQL', data);
  // 重新展开该行
  this.expanded.push(item.OfferId);
}

内容的提问来源于stack exchange，提问作者Maxim