使用 Bootstrap-Vue 使用 v-for 添加多个 v.slots

Question

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

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

<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' }]

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

编辑：这是我正在尝试做的事情的模型

Answer 1

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

答案如下：

使用 Bootstrap-Vue 使用 v-for 添加多个 v.slots

Add multiple v.slots with a v-for with Bootsrtap-Vue

vue.js

v-for

bootstrap-vue

v-slot