Vue2 doesn't see updates of object in expanded table vuetify

Question

I have a problem with reactivity in Vue2

I have an array of objects in Vuex, which are displayed in v-data-table, inside each object I have an array that is filled with data when row expanded, I want to see this array in the expanded property, but when calling a method that fills this data array, the changes are not displayed in expanded lines, but I can see changes in devtools.

The first time I open expanded row, changes don't displayed, but if I close the row and open it again the changes are displayed.

This is my default object in array

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

This is my updated object in array

{
  "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"
      }
    ]
  ]
}

This is my 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>

By click i callback method with push data into OfferDetails array This is my set property in vuex for this array

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

I have tried to change use MapGetters, but it didnt help

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

XuWang · Accepted Answer · 2024-04-11 08:35:40Z

0

In Vue2, when using "array subscript to modify values" or "when adding object key values", the devsrve function of Vue cannot listen for changes in data, which leads to data updates, but the view cannot trigger updates because data updates are not monitored.

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

change to

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

answered Apr 11, 2024 at 8:35

XuWang

3591 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue2 doesn't see updates of object in expanded table vuetify

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related