확장된 v-data-table이 Vuetify로 축소될 때 메서드 트리거

확장된 v-data-table이 Vuetify로 축소될 때 메서드 트리거

나는 그것을 구축하려고 했다.v-data-table그리고 매우 이상한 행동을 관찰했다.expanded.sync값. 첫 번째 레이어expanded.sync값은 정상으로 보이지만 두 번째 레이어expanded.sync에는 3개의 연속된 동일한 레코드가 있습니다.

이 값을 보고 확장 아이템을 접을 때 어떤 조치를 취하려고 합니다.전개된 아이템이 접혔을 때 검출할 수 있는 솔루션이 있습니까?

최상층 코드

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-key="name"
    :expanded.sync="itemExpanded"
    show-expand>
  >
    <template v-slot:top>
      <v-toolbar height="38" falt color="#cddde1">
        <v-toolbar-title dense> Test </v-toolbar-title>
      </v-toolbar>
    </template>
      <template v-slot:expanded-item="{headers}">
        <td :colspan="headers.length">
          <Show2></Show2>
        </td> 
      </template>
  </v-data-table>
</template>
<script>
import Show2 from "./ShowTest2.vue";
export default {
  name: "Show1",
   components: {
      Show2
  },
   data: () => ({
     itemExpanded:[],
    desserts: [
      {
        name: 'Show 1 - item 1',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%',
      },
      {
        name: 'Show 1 - item 2',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
    
    ],
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' },
      { text: "details", value: "data-table-expand"  },
    ],
  }),
  watch: {
     itemExpanded(newVal,val){
      console.log('layer 1', newVal);
    },
  },
};
</script>

제2층 코드

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-key="name"
    :expanded.sync="itemExpanded2"
    show-expand>
  >
    <template v-slot:top>
      <v-toolbar>
        <v-toolbar-title dense> Test2</v-toolbar-title>
      </v-toolbar>
    </template>
      <template v-slot:expanded-item="{headers}">
        <td :colspan="headers.length">
            
        </td> 
      </template>
  </v-data-table>
</template>
<script>
export default {
  name: "Show2",
   data: () => ({
     itemExpanded2:[],
    desserts: [
      {
        name: 'Show 2 - item 1',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      {
        name: 'Show 2 - item 2',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
    ],
    headers: [
      {text: 'Dessert (100g serving)',align: 'start', sortable: false, value: 'name',},
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' },
      { text: "details", value: "data-table-expand"  },
    ],
  }),
  watch: {
     itemExpanded2(newVal,val){
       console.log('layer2', newVal);
    },
  },
};
</script>

각 레이어의 Console.log 결과는 확장 + 축소됩니다.

layer 1 [__ob__: Observer]
ShowTest.vue?cc9a:66 layer 1 [{…}, __ob__: Observer]
ShowTest2.vue?5475:56 layer2 [{…}, __ob__: Observer]
ShowTest2.vue?5475:56 layer2 [{…}, __ob__: Observer]
ShowTest2.vue?5475:56 layer2 [{…}, __ob__: Observer]
ShowTest2.vue?5475:56 layer2 [__ob__: Observer]
ShowTest2.vue?5475:56 layer2 [__ob__: Observer]
ShowTest2.vue?5475:56 layer2 [__ob__: Observer]

정말 감사합니다!

를 사용하는 대신watch귀담아듣고item-expanded이 목적을 위해 제공되는 이벤트.

<v-data-table
  :headers="headers"
  :items="desserts"
  item-key="name"
  :expanded.sync="itemExpanded"
  show-expand
  @item-expanded="onExpand"
>

methods: {
  onExpand({ item, value }) {
    console.log(item, value);
  }
}

이 이벤트는 다음을 포함하는 개체를 반환합니다.item그리고.value소유물.그item행의 데이터입니다.value행이 지금 확장되는지 여부입니다.

언급URL : https://stackoverflow.com/questions/65760643/trigger-a-method-when-v-data-table-expanded-is-collapsed-in-vuetify