Stages from array of objects instead of strings

[jfdelarosa]

Is it possible to render the board with the stages made of an array of objects instead of an array of strings?

I mean, something like this:

stages: [{
  name: "Stage 1",
  id: 1
}, {
  name: "Stage 2",
  id: 2
}, {
  name: "Stage 3",
  id: 3
}]

Instead of:

stages: ["Stage 1", "Stage 2", "Stage 3"]

My structure is the following:

<kanban-board :stages="stages" :blocks="blocks">
    <div v-for="stage in stages" :slot="stage">
        <h2>{{ stage.name }}</h2>
    </div>
    <el-card v-for="block in blocks" :slot="block.id">
        <div><strong>id:</strong>{{ block.id }}</div>
        <div>{{ block.title }}</div>
    </el-card>
</kanban-board>

This is the result:

https://screencast.com/t/NTcrSUWqe
Thanks!

[atmonshi]

@jfdelarosa have you find a solution for this ?

[BrockReece]

Couldn't you just create a computed property for getting the array of objects in the correct shape?
Just off the top of my head?

stageNames () {
  return this.stages.map(stage => stage.name)
}

[atmonshi]

It’s will work , but in my case I needed the Object to get more data like the icon and the color of each stage from the DB

<div v-for="stage in stages" :slot="stage" :key="stage" :style="{ color: stage.color }"> <h2> <i class="fas" :class="'fa-'+stage.icon"></i> {{ stage }} </h2> </div>

I wish if there is a simpler way than the computed property .

[BrockReece]

Sure but then you can pass the array of stageNames to the kanban component and use the original stages array for building the slots, right?

Something like this should work?

<Kanban :stages="stageNames" :blocks="blocks">
  <div v-for="stage in stages" :slot="stage.name" :key="stage.name" :style="{ color: stage.color }"> 
    <h2>
      <i class="fas" :class="'fa-'+stage.icon"></i>
      {{ stage.name }}
    </h2>
  </div>
</Kanban>

[jfdelarosa]

Unfortunately, I leaved the project in wich I used this component.

@BrockReece that is the most logical solution, unfortunately it didn't work, I can't remember why :/
I think @wa7eedem solution should do the trick, never tried that way but it seems logic.

[BrockReece]

@jfdelarosa I tried my suggestion above and it seemed to work.
What is @wa7eedem's solution?

I can't think of a way of refactoring this without making breaking changes or adding a tonne of v-ifs
I think if we were going to do that, we should probably move to a scoped slot solution anyway, this component was built before Vue had scoped slots.