Vuetable-2: component change icon on every page in same row

[Georgeek]

Hello :)
In my vuetable every row has two events:
1) if user click on a row it will fetch data from server and open in a new tab detail information
2) (this one is problem) if user click on a button in vuetable (svg icon "plus" button) it will toggle detail row information below AND change an icon to "minus".
2.1) if user change page the same "minus" icon will be displayed (and toggleDetail is close)

I wrote it as a component and with this compontent I pass other data (data.id), so I can see that every page in that call in dt data is different, BUT icon is "minus" once its toggled on some other page in the same row

I hope it is me but i've tried lots of variants and dont know what to do

// component Column
<template lang="pug"> .flex.align-items-center .icon(@click="onToggleDatatable('view-item', rowData, rowData.id)") // Plus, svg path ommited svg(v-if="!isDetailRow" viewBox="0 0 1792 1792") // Minus, svg path ommited svg(v-if="isDetailRow" viewBox="0 0 1792 1792") span {{ isDetailRow }} {{ rowData.id}} </template>

// script Column

<script>
export default {
  data() {
    return {
      isDetailRow: false
    }
  },
  props: { // ommited
    rowData: 
    rowIndex: 
  },
  methods: {
    onToggleDatatable (action, data, index) {
      this.$parent.toggleDetailRow(data.id) // wrote it as an exapmle
      this.isDetailRow = !this.isDetailRow // toggle ICON 
      ) 
    }
  }
}
</script>

[ratiw]

Use isVisibleDetailRow function to check if the given detail row is already visible and change your icon appropriately. The demo that comes with the repo has already shown how this is done.

See here

To run the demo, fork the repo and npm install && npm run dev

[Georgeek]

Thank you so much! It helps!