Sorting table by project-CodePudding

I have an object that looks like this

projects: Object
    Admin: Object
        Project 1: Array[1]
            0: Object
                name: Admin Project 1
                description: Admin Project 1 Description
        Project 2: Array[2]
            0: Object
                name: Admin Project 2 part 1
                description: Admin Project 2 part 1 Description
            1: Object
                name: Admin Project 2 part 2
                description: Admin Project 2 part 2 Description

and what I'm trying to do is display this information on a table. The issue I'm having is that because of the way I'm creating the table I'm not able to group them by their sub category (EG: Project 2).

So my table would look like this.

Codepen of how I want it to look like

This is how it is looking like at the moment.

Codepen of the wrong way the table looks like

Here is my code

<table  style="width: 100%" v-for="(value, key) in projects">
    <tbody>
        <tr style="font-size: 90%; background: #a0a0a0; color: #fafafa; font-weight: normal">
            <th colspan="8" style="text-indent: 8px;">{{key}}</th>
        </tr>
        <tr style="font-size: 90%; background: #d0d0d0; color: #606060;" v-for="(v, k) in value">
            <th colspan="7" style="text-indent: 32px;">{{ k }}</th>
        </tr>
    </tbody>

    <tbody>
        <tr v-for="(p, kk) in value">
            <td>
                <table>
                    <tr  v-for="vp in p">
                        <td>{{ vp.name }}</td>
                        <td>{{ vp.description }}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

CodePudding user response：

The tbody elements are structurize themselves below each other (see table)

If you add the contents of the projects inside the same tbody element as additional rows it should work:

<div id="app">
  <table  style="width: 100%" v-for="(value, key) in projects">
    <thead>
      <tr style="font-size: 90%; background: #a0a0a0; color: #fafafa; font-weight: normal">
        <th colspan="8" style="text-indent: 8px;">{{key}}</th>
      </tr>
    </thead>
    
    <tbody v-for="(v, k) in value">
      <tr style="font-size: 90%; background: #d0d0d0; color: #606060;">
        <th colspan="7" style="text-indent: 32px;">{{ k }}</th>
      </tr>
      <tr v-for="vp in v">
        <td>{{ vp.name }}</td>
        <td>{{ vp.description }}</td>
      </tr>
    </tbody>
  </table>
</div>

EDIT: I update the code to use multiple tbody elements and a thead for the object root – should be semantically more correct I think.

CodePudding user response：

This happens because all your for loop have to be imbricated inside parent divs

Here is a much simpler example using only div.

new Vue({
  el: "#app",
  data: {
    projects: {
        Admin: {
        'Project 1': [
          {name: 'Admin Project 1', description: 'Admin Project 1 Description'}
        ],
        'Project 2': [
          {name: 'Admin Project 2 part 1', description: 'Admin Project 2 part 1 Description'},
          {name: 'Admin Project 2 part 2', description: 'Admin Project 2 part 2 Description'}
        ]
      }
    }
  },
  methods: {
    
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(value, key) in projects">
    {{key}}
    
    <div v-for="(value2, key2) in value">
      {{key2}}
      
      <div v-for="(value3) in value2">
         {{value3.name}} - {{value3.description}}
    </div>
    </div>
  </div>
</div>

So in your case you have to think to another model of data.