Vuetify 嵌套项目道具：如何在嵌套组件中显示父项目 ID？

Question

我有一个嵌套在 v-data-table 中的 v-virtual-scroll，例如：

<v-data-table :items="itemsArray1">
    (...)
    <v-virtual-scroll :items="itemsArray2">
        (...)
        {{item.id}} this is the item id from itemsArray2 element
    </v-virtual-scroll>
</v-data-table>

两者都有自己的 'items' 道具。

问题：{{item.id}} 在 v-virtual-scroll returns itemArray2 元素 ID 中。我想访问 itemArray1 元素 ID。

问题：如何访问嵌套的v-virtual-scroll组件中的v-data-table item ID？

Answer 1

您可以从 <v-data-table> 访问作用域插槽。这样的东西应该可以工作（参见 https://vuetifyjs.com/en/components/data-tables/#item）

<v-data-table :items="itemsArray1">
    <template v-slot:item="{ item: itemArr1 }">
      <v-virtual-scroll :items="itemsArray2">
        (...)
        {{ itemArr1 }} // item from itemsArray1
        {{item.id}} // this is the item id from itemsArray2 element
      </v-virtual-scroll>
    </template> 
</v-data-table>

Vuetify 嵌套项目道具：如何在嵌套组件中显示父项目 ID？

Vuetify nested items props: How to show parent item id within nested component?

vue.js

vuetify.js