Vue2 在扩展表 vuetify 中看不到对象的更新

Question

我在 Vue2 中遇到反应性问题

我在Vuex中有一个对象数组，它们显示在v-data-table中，在每个对象内部我有一个在行展开时填充数据的数组，我想在展开的属性中看到这个数组，但是当调用填充此数据数组的方法，更改不会显示在扩展行中，但我可以在 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 数据表

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

通过单击我的回调方法将数据推送到 OfferDetails 数组中 这是我在 vuex 中为该数组设置的属性

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])
},

我尝试更改使用MapGetters，但没有帮助

...mapGetters('discountcard', ['getPersonalOffersInfo'])

Answer 1

在Vue2中，当使用“数组下标修改值”或“添加对象键值时”时，Vue的devsrve函数无法监听数据的变化，从而导致数据更新，但视图无法触发更新，因为数据更新是不受监控。

state.PersonalOffersInfo[objectToFind].OfferDetails.splice(0, 0, [...results])

更改为

let personalOffersInfo = state.PersonalOffersInfo[objectToFind]
personalOffersInfo.OfferDetails.splice(0, 0, [...results])
state.PersonalOffersInfo.splice(objectToFind,1,personalOffersInfo)