Rendering deeply nested data in a Vue table

Question

Rendering deeply nested data in a Vue table

I am currently in the process of updating some older code, transitioning to Vue as a replacement. Everything has been going smoothly except for one specific table that is templated using handlebars.

With handlebars and nested {{each}} loops, I can easily navigate through the nested data structure while displaying the relevant information in table rows. Here's an example of this functionality using handlebars: https://jsfiddle.net/6dsruo40/1/

However, I am struggling to achieve the same result using Vue with its v-for directive.

You can see my current progress on this issue in the following fiddle: https://jsfiddle.net/cj7go6bv/

I am unsure how to iterate through the data structure in Vue while maintaining the structure of the <tr> elements similar to what is done in handlebars.

Below is the flexible data structure that I am working with:

[Your custom data here]

The Vue code I have implemented so far is quite basic:

[Your Vue component code here]

And here is the corresponding template:

[Your Vue template code here]

If anyone can provide guidance on how to achieve a similar table display in Vue as handlesbars, I would greatly appreciate it. Thank you!

javascript vue.js vuejs2 vue-component handlebars.js

Answer 1

Answer №1

Here is an updated section of the template.

<tbody>
  <template v-for="item in data">
    <tr class="name-row" >
      <th class="name" colspan="3">{{item.key}}</th>
    </tr>
    <template v-for="subregion in item.values">
      <tr>
        <th class="group-name" colspan="4">{{subregion.key}}</th>
      </tr>
      <tr v-for="site in subregion.values">
        <td>{{site.site}}</td>
        <td>{{site.total}}</td>
        <td>
          <span>{{site.timestamp}}</span>
        </td>  
      </tr>
    </template>
  </template>
<tbody>

View the updated fiddle here.

The key point is utilizing the template element to display multiple tr elements within a single iteration.

Answer 2

Here is an updated section of the template.

<tbody>
  <template v-for="item in data">
    <tr class="name-row" >
      <th class="name" colspan="3">{{item.key}}</th>
    </tr>
    <template v-for="subregion in item.values">
      <tr>
        <th class="group-name" colspan="4">{{subregion.key}}</th>
      </tr>
      <tr v-for="site in subregion.values">
        <td>{{site.site}}</td>
        <td>{{site.total}}</td>
        <td>
          <span>{{site.timestamp}}</span>
        </td>  
      </tr>
    </template>
  </template>
<tbody>

View the updated fiddle here.

The key point is utilizing the template element to display multiple tr elements within a single iteration.

Rendering deeply nested data in a Vue table

Answer №1

Similar questions

The ajax method is encountering an issue when trying to perform an action: It is unable to find the necessary anti-forgery form field "__RequestVerificationToken" required for the operation

Animating progress bars using React Native

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

Creating dynamic grid data based on various filter criteria using JavaScript (AngularJS)

Error: Unable to locate Vue and its definition

Transferring data as a JSON object from PHP to JavaScript

Discover the importance of Node.js integration with HTML

Delivering create-react-app's build files through an express server

JavaScript function using recursion returning an undefined value

What exactly is the functionality of the jQuery.on() method?

How to Determine if Your Chrome Packaged App is Operating in Kiosk Mode

What steps do I need to take to implement AJAX form authentication?

Retrieve Data from Form Using PHP and Ajax

Use Protractor to simulate Loss Connection by clearing LocalStorage in a Spec

Navigating through elements in the hidden shadow DOM

The JSP AJAX response comes back empty

Validation of New Relic License Key

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

Could not locate the provider: $stateProvider