2

My table data has nested objects, so I need to use a v-slot to render it correctly on a table. The thing is that the table columns depend on the lenght of another array.

I tried using a v-for outside my v-slot, but then I get an error telling me that the v-slots need to be directly under the root level inside its component.

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

    </template>
</div>

My data looks like this:

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

And the array it depends on it this one:

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

It has to create columns with the second array, and show the corresponding data of the first one.

Edit: This is a mock up of what I'm trying to do Edit: This is a mock up of what I'm trying to do

Gerardo Cabrera
  • 46
  • 1
  • 6
  • 1
    Could you provide a bit more of your markup for the table and any computed props you are using? – Troy Morehouse Jan 23 '20 at 19:37
  • And perhaps a screen shot of a mockup of how you want the table to be laid out? – Troy Morehouse Jan 23 '20 at 19:57
  • Dont have any computed props right now, but give me a minute, and i´ll upload the mock up – Gerardo Cabrera Jan 24 '20 at 17:08
  • OK, so you will need to create a computed prop that adds on the plant names to your fields. each plant name will have it's own field "key" name (must be unique) which you can create `v-slot:cell(plantName)` dynamically in a loop (or use a default `v-slot:cell()`). When creating v-slots dynamically in a v-for loop, don't use a div, but instead use `` – Troy Morehouse Jan 24 '20 at 18:09
  • Ok, so i did this as you suggested: And got this error: – Gerardo Cabrera Jan 24 '20 at 19:08
  • Ah, you may need to try moving the v-for and v-slot to the same template: `` – Troy Morehouse Jan 24 '20 at 19:40
  • Tried it, the error went away, but it still not showing the data. For what I can see, it wont enter the loop this way. My fields, on the other hand, are done on the mounted() function, and they do show up, just with an empty column. – Gerardo Cabrera Jan 25 '20 at 02:25

1 Answers1

0

Found another similar question wich was correctly answered. For what I understand, the issue had to do with some string interpolation.

Here's the answer:

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

Gerardo Cabrera
  • 46
  • 1
  • 6