[Vuejs]-How can I transpose these rows into columns in Vue?

by

0👍

✅

I’d suggest using display: flex to achieve this instead of a regular table.

With a table, in each cell (td) you’d need to figure out it’s header (th) above so you know from what list to get the trait.

With flex, you can group the columns properly, and your html can be as simple as

<div id="app">
  <div class="category" v-for="header in categoryHeaders" :key="header">
    <h2>{{ header }}</h2>
    <ul>
      <li v-for="child in categoryChildren(header)">
        <span>{{ child.text }}</span>
      </li>
    </ul>
  </div>
</div>

And the only css to get these into columns would be

#app {
  display: flex;
}

I have a more complete jsfiddle here with how I would initially approach it

Leave a comment