Display a q-table inside a nested row q-table component

In order to display lists within items in another list, such as a list of chapters with their titles, I am trying to achieve this using q-tables instead of q-list.

Although it is usually straightforward with q-list, I am facing some challenges while working with q-tables.

I attempted the solution below but encountered difficulties with v-for:

<div id="q-app">
  <div class="q-pa-md">
    <q-table
      :data="data"
      :columns="columns"
      row-key="name"
    >

      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
          </q-td>
          <q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>
        </q-tr>
        
        <q-tr 
            :props="props"
            v-show="props.expand" 
            v-for="item in data"
          >  
            <q-table                                      
               hide-header
               hide-bottom
               :data="item.childs"
               :columns="columnsChilds"
               style="background:yellow"> 
          </q-table>    
        </q-tr>
      </template>
    </q-table>
  </div>
 </div>

CODE PEN https://codepen.io/ijose/pen/eYzawpx

Thank you.

EDITED: The client-side data structure is as follows:

data:[
0:{
  name:'yogurt',
  childs:[
      0:{name:'one},
      1:{name:'two}
  ]
},
1:{
  name:'yogurt two',
  childs:[
      0:{name:'three},
      1:{name:'four}
  ]
},
]

Answer №1

In the nested child data, there is an array containing just one object with a duplicated property called name. It should actually be an array of objects structured like this:

data: [{
  name: 'Frozen Yogurt',
  childs: [
    { name: 'one' },
    { name: 'two' },
    { name: 'three' }
  ]
}, {
  name: 'Ice cream sandwich',
  childs: [
    { name: 'four' },
    { name: 'five' },
  ]
}, {
  name: 'Eclair',
}]

When using the q-table component, it requires an array of data, so you don't need to use a v-for loop on each table (both inner and outer). Simply remove the v-for directive and set the data attribute to the current outer row's childs object like this:

<q-tr :props="props" v-show="props.expand">
    <q-table
        hide-header
        hide-bottom
        :data="props.row.childs"
        :columns="columnsChilds"
        style="background:yellow; min-width:300px">
    </q-table>
</q-tr>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generating intricate JSON structures with JavaScript programming instructions

In the world of JSON, I am still a novice. I need to use JavaScript to construct the JSON structure below, but I'm struggling with adding the second element ("12101") and populating the people in the JSON Structure. Below is the code I tried, however, ...

Having difficulty displaying a partial view within a view while making an AJAX call

Trying to figure out what's missing in my code. I have a view with some radio buttons and I want to display a different partial view when a radio button is selected. Here's the snippet of my code: Controller public ActionResult Method(string va ...

Enhance the visual appeal of Autodesk Forge Viewer by incorporating environmental textures

Is there a way to incorporate an environmental texture into Autodesk Forge Viewer v6.0? I know in Three.js you can apply a texture to the scene's background and environment, so how would I achieve this in APS viewer? I'm not looking for a skybox ...

Orbiting ThreeJS object positioned at the coordinates (0,0,0)

I have set up a ThreeJS Scene similar to the image provided. The issue I'm facing is when trying to rotate Obj2 vertically around Obj1, it ends up rotating around the Z axis instead of the center point (0,0,0). My goal is for Obj2 to orbit exclusively ...

What is the best way to ensure bidirectional text appears correctly when two conflicting languages are combined, ensuring explicit directionality is set?

As I work on localization implementation, I encounter an issue with the directionality of mixed characters on the page. The text content is stored in a json file and inserted into the DOM using a Vue.js template. While individual characters display corre ...

What is the process for incorporating a new URL into the routes.js file of a preexisting Node.js project that was developed with locomotive?

module.exports = function routes() { this.root('pages#main'); this.match('/status', 'pages#status'); this.resources('paper'); this.resources('tempform'); this.match('/paper/domain', 'pages#n ...

Setting a radio button as default based on a variable value can be accomplished by following a few

I am working with 2 radio buttons and I need to dynamically check one based on a variable value. <input type="radio" name="team" id="team_7" value="7"> <input type="radio" name="team" id="team_8" value="8"> The variable number is set dependin ...

Switching between Login Form and Register Form in VueJS template

Recently, I attempted to switch between the 'Login Form' and 'Register Form' using code that I found on codepen Flat HTML5/CSS3 Login Form. While the code functioned properly on its own, when integrated into a Vue Template, the form fai ...

Secure your API routes in NextJS by using Passport: req.user is not defined

Currently, I am utilizing NextJS for server-side rendering and looking to secure certain "admin" pages where CRUD operations on my DB can be performed. After successfully implementing authentication on my website using passport and next-connect based on a ...

While validating in my Angular application, I encountered an error stating that no index signature with a parameter of type 'string' was found on type 'AbstractControl[]'

While trying to validate my Angular application, I encountered the following error: src/app/register/register.component.ts:45:39 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used ...

How does the Express next() function trigger the execution of the following middleware?

Can someone please explain how the next() function is able to call the subsequent middleware or route? I've searched everywhere but can't seem to find a good resource with the actual code. If anyone could share where I may find this information, ...

Utilize Vite 2 to import the Monaco Editor into your project

After setting up my Vite 2 project with monaco-editor as a dependency, I encountered an issue where it says that the workers are not imported. editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage at EditorSimpleWorker.loadForeignModu ...

Auto-collapse sidebar upon clicking anywhere on the page

I have a dynamic sidebar that appears when the user clicks on a hamburger button. Here is the layout: $('#nav-toggle').click(function() { if($('#nav-toggle').hasClass('active')){ $('.menu').animate({ r ...

Exploring Node and Express Request Query

I'm struggling with a specific endpoint setup in my code. // GET /api/logs/ app.get('/api/logs', function (req, res) { if (req.query.reverse === true) { res.send((mainModule.logs).reverse()); } else { res.send(mainModule.logs) ...

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Update: The page code can be accessed via my page URL. I'm unsure where the issue lies. Your assistance is appreciated. Issue: Initially, when clicking on the chess puzzles page, everything works fine. However, upon re-clicking from the homepage, th ...

What is the best way to ensure the parent element adjusts to fit its floated children, without exceeding the width of the window?

I am attempting to center a group of floating elements, but due to them being displayed in masonry style, I cannot set them as inline. It is clear that a container is necessary, but I have been unable to find information on how to achieve this: Please dis ...

Angular 4/5 | Custom Dropdown Component

I have been working on a custom dropdown directive in Angular that I can attach to any DOM element. Below is the code for my directive: import { Directive, HostListener } from '@angular/core'; @Directive({ selector: '[appDropdown]' ...

Working with HTML5 canvas to draw multiple images

Here is the code I'm working with: http://jsfiddle.net/zyR9K/4/ var Enemies = { x: 25, y: 25, width: 20, height: 30, speed: 0.5, color: "#000", draw: function () { canvas.fillStyle = ...

Error: Attempting to access the 'SearchBox' property of an undefined variable is not allowed

I have been working on a Google Maps code that displays both public and private schools with different markers for each category. However, when running the code, I encountered an error specifically on this line of code: var searchBox = new google.maps.pl ...

Transform the jQuery Mobile slider into a jQuery UI slider and update the text

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> function modifycontent() { if (document.getElementById("slider").value<33) { $("#1").fadeIn("slow"); $("#2").fadeOut("slow"); ...