[Vuejs]-How to show subtask under task using parent id?

by

0👍

You can achieve this requirement by making the parent/child relationship in the template itself.

Live Demo :

new Vue({
  el: '#app',
  data: {
    content: [{
      id: 1,
      issueKey: '3661',
      issueType: 'Task',
      parent_issueKey: null,
      summary: 'test issue'
    }, {
      id: 3,
      issueKey: '3245',
      issueType: 'Sub-task',
      parent_issueKey: '3661',
      summary: 'test1 issue'
    }, {
      id: 2,
      issueKey: '2341',
      issueType: 'Sub-task',
      parent_issueKey: '3661',
      summary: 'test2 issue'
    }, {
      id: 5,
      issueKey: '5342',
      issueType: 'Story',
      parent_issueKey: null,
      summary: 'test3 issue'
    }, {
      id: 4,
      issueKey: '4365',
      issueType: 'Sub-defect',
      parent_issueKey: '5342',
      summary: 'test4 issue'
    }]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul v-for="item in content" :key="item.id">
    <li v-if="!item.parent_issueKey">{{ `${item.issueKey} ${item.summary}` }}</li>
    <ul v-for="child in content.filter(c => c.parent_issueKey === item.issueKey)" :key="child.id">
      <li>{{ `${child.issueKey} ${child.summary}` }}</li>
    </ul>
  </ul>
</div>

Leave a comment