我尝试构建 av-data-table并在观察expanded.sync值时观察到非常奇怪的行为。第1层expanded.sync值看起来正常,但第2层expanded.sync有3个连续相同的记录。
我打算观察这个值,在折叠展开的项目时做一些事情。有没有什么解决方案可以检测展开的项目何时折叠?
\n顶层代码
\n<template>\n <v-data-table\n :headers="headers"\n :items="desserts"\n item-key="name"\n :expanded.sync="itemExpanded"\n show-expand>\n >\n <template v-slot:top>\n <v-toolbar height="38" falt color="#cddde1">\n <v-toolbar-title dense> Test </v-toolbar-title>\n </v-toolbar>\n </template>\n <template v-slot:expanded-item="{headers}">\n <td :colspan="headers.length">\n <Show2></Show2>\n </td> \n </template>\n </v-data-table>\n</template>\n<script>\nimport Show2 from "./ShowTest2.vue";\nexport default {\n name: "Show1",\n components: {\n Show2\n },\n data: () => ({\n itemExpanded:[],\n desserts: [\n {\n name: 'Show 1 - item 1',\n calories: 237,\n fat: 9.0,\n carbs: 37,\n protein: 4.3,\n iron: '1%',\n },\n …Run Code Online (Sandbox Code Playgroud)