Добавьте несколько v.slots с v-for с Bootsrtap- Vue

Question

В моих данных таблицы есть вложенные объекты, поэтому мне нужно использовать v-слот, чтобы правильно отобразить их в таблице. Дело в том, что столбцы таблицы зависят от длины другого массива.

Я пытался использовать v-for вне моего v-слота, но затем я получаю ошибку, сообщающую, что v-слоты должны быть непосредственно под уровнем root внутри его компонента.

<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

Нашел еще один похожий вопрос, на который был дан правильный ответ. Насколько я понимаю, проблема была связана с некоторой интерполяцией строк.

Вот ответ:

{ ссылка }