Creating an interactive accordion table using vue.js and the v-for directive in the main element

Question

Creating an interactive accordion table using vue.js and the v-for directive in the main element

Looking for some help on implementing this feature using VUE: https://jsfiddle.net/jacekpr/roschwvL/5/

Currently, my progress is here: https://jsfiddle.net/jacekpr/8bhpqc5s/13/

However, I'm facing an issue with having multiple root elements in the component while trying to render control-Component within risk-Component.

What I ideally want at the end of the risk-component is:

<control-Component v-for="control in risk.controls" :control="control" :key="risk.title + control.title" />

But I keep encountering this error message:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Any suggestions on how to overcome this challenge?

javascript vue.js

Answer 1

Answer №1

To enhance the functionality of your table, you have the option to incorporate multiple tbody tags. Simply encapsulate risk-component within a tbody, allowing for several trs to be nested within it. It may require some restructuring to avoid nesting the tbodys.

var risks = '[{"title":"Risk1", "controls":[{"title":"Control1"}, {"title":"Control2"}, {"title":"Control3"}]},' +
  '{"title":"Risk2", "controls":[{"title":"Control1"}, {"title":"Control2"}, {"title":"Control3"}]},' +
  '{"title":"Risk3", "controls":[{"title":"Control1"}, {"title":"Control2"}, {"title":"Control3"}]}]';

var programs = '[{"title":"Program1", "practice":"IT", "auditType":"GAT", "version":"0.01", "programId":"2017.1", "status":"draft", "risks":' + risks + '},' +
  '{"title":"Program2", "practice":"IT", "auditType":"On-request", "version":"0.01", "programId":"2017.2", "status":"draft", "risks":""},' +
  '{"title":"Program3", "practice":"CA", "auditType":"GAT", "version":"0.01", "programId":"2017.3", "status":"approved", "risks":' + risks + '},' +
  '{"title":"Program4", "practice":"CA", "auditType":"On-request", "version":"0.01", "programId":"2018.1", "status":"draft", "risks":' + risks + '},' +
  '{"title":"Program5", "practice":"OA\FA", "auditType":"GAT", "version":"0.01", "programId":"2019.1", "status":"draft", "risks":' + risks + '},' +
  '{"title":"Program6", "practice":"OA\FA", "auditType":"On-request", "version":"0.01", "programId":"2020.1", "status":"approved", "risks":' + risks + '}]';


var dataO = JSON.parse(programs);

Vue.component('control-component', {
  props: ['control'],
  template: '<tr class="control" >' +
    '<td></td>' +
    '<td colspan="6"><a href="#">{{ control.title }}</a></td>' +
    '</tr>'
})

Vue.component('risk-component', {
  props: ['risk'],
  template: '<tbody><tr class="risk" >' +
    '<td></td>' +
    '<td colspan="5"><a href="#">{{risk.title}}</a></td>' +
    '<td><span class="signrisk"></span></td>' +
    '</tr>' +
    '<control-component v-for="control in risk.controls" :control="control" :key="control.title"></control-component>' +
    '</tbody>'
});


var programTable = new Vue({
  el: '#programTable',
  data: {
    programs: ''
  }
})
programTable.programs = dataO;

.signprogram:after {
  content: "+";
  display: inline-block;
  cursor: pointer;
}

.expandprogram:after {
  content: "-";
  cursor: pointer;
}

.signrisk:after {
  content: "+";
  display: inline-block;
  cursor: pointer;
}

.expandrisk:after {
  content: "-";
  cursor: pointer;
}

th {
  background-color: #e0e0e0;
}

.program {
  background-color: #e9e9e9;
}

.risk {
  background-color: #eeeeee;
}

.control {
  background-color: #f2f2f2;
}

.spacing {
  background-color: white;
}

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<table class="table" width="300px" id="programTable">
  <thead>
    <tr>
      <th>Status</th>
      <th>Title</th>
      <th>Practice</th>
      <th>Audit Type</th>
      <th>Version</th>
      <th>Program</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <template v-for="program in programs">
    <tbody>
      <tr class="program" >
        <td v-if="program.status == 'draft'" style="width: 20px; background-color: lightblue;">&nbsp;&nbsp;&nbsp;</td>
        <td v-if="program.status == 'approved'" style="width: 20px; background-color: lightgreen;">&nbsp;&nbsp;&nbsp;</td>
        <td><a href="/auditprograms/1">{{program.title}}</a></td>
        <td>{{program.practice}}</td>
        <td>{{program.auditType}}</td>
        <td>{{program.version}}</td>
        <td>{{program.programId}}</td>
        <td><span class="signprogram"></span></td>
      </tr>
    </tbody>
    <risk-component v-for="risk in program.risks" :risk="risk" :key="program.title + risk.title"></risk-component>
  </template>
</table>

Answer 2

To enhance the functionality of your table, you have the option to incorporate multiple tbody tags. Simply encapsulate risk-component within a tbody, allowing for several trs to be nested within it. It may require some restructuring to avoid nesting the tbodys.

var risks = '[{"title":"Risk1", "controls":[{"title":"Control1"}, {"title":"Control2"}, {"title":"Control3"}]},' +
  '{"title":"Risk2", "controls":[{"title":"Control1"}, {"title":"Control2"}, {"title":"Control3"}]},' +
  '{"title":"Risk3", "controls":[{"title":"Control1"}, {"title":"Control2"}, {"title":"Control3"}]}]';

var programs = '[{"title":"Program1", "practice":"IT", "auditType":"GAT", "version":"0.01", "programId":"2017.1", "status":"draft", "risks":' + risks + '},' +
  '{"title":"Program2", "practice":"IT", "auditType":"On-request", "version":"0.01", "programId":"2017.2", "status":"draft", "risks":""},' +
  '{"title":"Program3", "practice":"CA", "auditType":"GAT", "version":"0.01", "programId":"2017.3", "status":"approved", "risks":' + risks + '},' +
  '{"title":"Program4", "practice":"CA", "auditType":"On-request", "version":"0.01", "programId":"2018.1", "status":"draft", "risks":' + risks + '},' +
  '{"title":"Program5", "practice":"OA\FA", "auditType":"GAT", "version":"0.01", "programId":"2019.1", "status":"draft", "risks":' + risks + '},' +
  '{"title":"Program6", "practice":"OA\FA", "auditType":"On-request", "version":"0.01", "programId":"2020.1", "status":"approved", "risks":' + risks + '}]';


var dataO = JSON.parse(programs);

Vue.component('control-component', {
  props: ['control'],
  template: '<tr class="control" >' +
    '<td></td>' +
    '<td colspan="6"><a href="#">{{ control.title }}</a></td>' +
    '</tr>'
})

Vue.component('risk-component', {
  props: ['risk'],
  template: '<tbody><tr class="risk" >' +
    '<td></td>' +
    '<td colspan="5"><a href="#">{{risk.title}}</a></td>' +
    '<td><span class="signrisk"></span></td>' +
    '</tr>' +
    '<control-component v-for="control in risk.controls" :control="control" :key="control.title"></control-component>' +
    '</tbody>'
});


var programTable = new Vue({
  el: '#programTable',
  data: {
    programs: ''
  }
})
programTable.programs = dataO;

.signprogram:after {
  content: "+";
  display: inline-block;
  cursor: pointer;
}

.expandprogram:after {
  content: "-";
  cursor: pointer;
}

.signrisk:after {
  content: "+";
  display: inline-block;
  cursor: pointer;
}

.expandrisk:after {
  content: "-";
  cursor: pointer;
}

th {
  background-color: #e0e0e0;
}

.program {
  background-color: #e9e9e9;
}

.risk {
  background-color: #eeeeee;
}

.control {
  background-color: #f2f2f2;
}

.spacing {
  background-color: white;
}

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<table class="table" width="300px" id="programTable">
  <thead>
    <tr>
      <th>Status</th>
      <th>Title</th>
      <th>Practice</th>
      <th>Audit Type</th>
      <th>Version</th>
      <th>Program</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <template v-for="program in programs">
    <tbody>
      <tr class="program" >
        <td v-if="program.status == 'draft'" style="width: 20px; background-color: lightblue;">&nbsp;&nbsp;&nbsp;</td>
        <td v-if="program.status == 'approved'" style="width: 20px; background-color: lightgreen;">&nbsp;&nbsp;&nbsp;</td>
        <td><a href="/auditprograms/1">{{program.title}}</a></td>
        <td>{{program.practice}}</td>
        <td>{{program.auditType}}</td>
        <td>{{program.version}}</td>
        <td>{{program.programId}}</td>
        <td><span class="signprogram"></span></td>
      </tr>
    </tbody>
    <risk-component v-for="risk in program.risks" :risk="risk" :key="program.title + risk.title"></risk-component>
  </template>
</table>

Answer 3

Answer №2

When faced with a similar question, I propose an alternative solution: Vue js error: Component template should contain exactly one root element

In this scenario, you can assign the <tbody/> to a functional component that will generate a list of <tr/> components. Alternatively, delegate the <table/> to a functional component that will create a list of <tbody/> components. Or even utilize both methods.

Here is the code snippet:

If, for any reason, you prefer not to add a wrapper (as in the case of <tr/> components), a functional component can be used instead.

Instead of having a single components/MyCompo.vue, organize multiple files within a components/MyCompo folder:

components/MyCompo/index.js
components/MyCompo/File.vue
components/MyCompo/Avatar.vue

This structure allows seamless usage of the component as before.

Content of components/MyCompo/index.js file :

import File from './File';
import Avatar from './Avatar';   

const commonSort=(a,b)=>b-a;

export default {
  functional: true,
  name: 'MyCompo',
  props: [ 'someProp', 'plopProp' ],
  render(createElement, context) {
    return [
        createElement( File, { props: Object.assign({light: true, sort: commonSort},context.props) } ),
        createElement( Avatar, { props: Object.assign({light: false, sort: commonSort},context.props) } )
    ]; 
  }
};

If there are any shared functions or data between the templates, simply pass them as properties – it's that simple!

This approach opens up possibilities for creating lists of components and exploring various features.

Answer 4

When faced with a similar question, I propose an alternative solution: Vue js error: Component template should contain exactly one root element

In this scenario, you can assign the <tbody/> to a functional component that will generate a list of <tr/> components. Alternatively, delegate the <table/> to a functional component that will create a list of <tbody/> components. Or even utilize both methods.

Here is the code snippet:

If, for any reason, you prefer not to add a wrapper (as in the case of <tr/> components), a functional component can be used instead.

Instead of having a single components/MyCompo.vue, organize multiple files within a components/MyCompo folder:

components/MyCompo/index.js
components/MyCompo/File.vue
components/MyCompo/Avatar.vue

This structure allows seamless usage of the component as before.

Content of components/MyCompo/index.js file :

import File from './File';
import Avatar from './Avatar';   

const commonSort=(a,b)=>b-a;

export default {
  functional: true,
  name: 'MyCompo',
  props: [ 'someProp', 'plopProp' ],
  render(createElement, context) {
    return [
        createElement( File, { props: Object.assign({light: true, sort: commonSort},context.props) } ),
        createElement( Avatar, { props: Object.assign({light: false, sort: commonSort},context.props) } )
    ]; 
  }
};

If there are any shared functions or data between the templates, simply pass them as properties – it's that simple!

This approach opens up possibilities for creating lists of components and exploring various features.

Creating an interactive accordion table using vue.js and the v-for directive in the main element

Answer №1

Answer №2

Similar questions

Angular UI Bootstrap: Promise resolved or rejected upon modal closure

Is there a way to prevent a page from automatically redirecting to another page without relying on user action or using the StopPropagation and window.onbeforeunload event?

Tips for displaying a category name only once if it has already been rendered in a map function

Is there a way to post an array of MongoDB documents embedded in req.body?

Making alterations to the content of a division using getElementById().innerHTML yields no difference

Generating npm package without including file extensions in imports

Implement lazy loading functionality in Django to dynamically load data as the user scrolls

What steps can I take to ensure that my header remains static while my slides move in fullpagejs?

Subpar resolution of PNG images displayed in HTML canvas

Utilizing the CSS 'overflow: hidden' property and jQuery to restrict users from scrolling during a loading page

I keep encountering the following issue: "It seems that the file requested at /images/crown.png is not recognized as a valid image, as it was received as text/html; charset=utf-8."

Component does not display dynamically created DOM elements

The error message "TypeError: event.preventDefault is not a function when using Formcarry with React Hook Form" is

Unable to assign a scroll event delegation by using the "on" method

how to retrieve the class name of a checkbox solely when it has been checked

How can I open the Ion-datetime view for the current year without allowing the selection of a specific day?

Identify all inputs that have been dynamically modified using AngularJS

Unable to load the requested resource: net::ERR_FAILED

The CSS for a VueJS compiled app seems to fail to apply properly unless manually copied and pasted into the browser's style editor

Steps to deactivate the select element in backbone.js