使用 Bootstrap-Vue 添加多个带有 v-for 的 video.slots

Posted 2023-02-22

【中文标题】使用 Bootstrap-Vue 添加多个带有 v-for 的 video.slots

【英文标题】：Add multiple v.slots with a v-for with Bootsrtap-Vue

【发布时间】：2020-05-09 23:28:07

【问题描述】：

我的表格数据有嵌套对象，所以我需要使用 v-slot 在表格上正确渲染它。问题是表格列取决于另一个数组的长度。

我尝试在我的 v-slot 外使用 v-for，但随后我收到一条错误消息，告诉我 v-slots 需要直接位于其组件内的根级别之下。

<div v-for="plant in stockTable.plants" :key="plant.key">
    <template v-slot:cell(plant.name)="row">

    </template>
</div>

我的数据如下所示：

 key: 1, description: 'Stock-1', plants: [ key: 1, name: 'Plant-1', inventory: [ type: 'Physical', stock: 875 ,  type: 'Virtual', stock: 1540 ] ,  key: 2, name: 'Plant-2', inventory: [ type: 'Physical', stock: 458 ,  type: 'Virtual', stock: 525 ] ] 

而它所依赖的数组就是这个：

plants: [ key: 1, name: 'Plant-1' ,  key: 2, name: 'Plant-2' ]

它必须用第二个数组创建列，并显示第一个数组的对应数据。

编辑：这是我正在尝试做的模拟

【问题讨论】：

您能否为表格和您正在使用的任何计算道具提供更多标记？

也许还有一张你希望如何布置桌子的模型的屏幕截图？

目前没有任何计算道具，但请稍等，我会上传模型

好的，所以您需要创建一个计算道具，将植物名称添加到您的字段中。每个植物名称都有自己的字段“键”名称（必须是唯一的），您可以在循环中动态创建v-slot:cell(plantName)（或使用默认的v-slot:cell()）。在 v-for 循环中动态创建 v-slot 时，不要使用 div，而是使用 <template v-for"foo in bar"><template v-slot:[cell($bar)]="data">...</template></template>

好的，所以我按照你的建议做了： 得到了这个错误：

【参考方案1】：

发现另一个类似的问题得到了正确回答。据我了解，这个问题与一些字符串插值有关。

答案如下：

https://***.com/a/58143362/11932235