Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements.

<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>

It works well with static values, but now I want to incorporate Vue.js and utilize a v-for loop with myList data. However, due to the presence of two tbody elements together, I am facing issues implementing v-for directly. Also, wrapping them in a div tag is not feasible as it would break the table structure.

Is there any non-affective element that can be used to group these multiple tbody elements for a v-for loop?

<template>
   <non-affective-tag v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </non-affective-tag>
</template>

You can view the fiddle here:

https://jsfiddle.net/jeaxopwf/2/

Below is an example:

$('.js-table-sections-header').click(function() {
$(this).toggleClass('open');
})
.js-table-sections-header > tr {
  cursor: pointer;
}
.js-table-sections-header > tr > td:first-child > i {
  -webkit-transition: -webkit-transform 0.15s ease-out;
  transition: transform 0.15s ease-out;
}
.js-table-sections-header + tbody {
  display: none;
}
.js-table-sections-header.open > tr {
  background-color: #f9f9f9;
}
.js-table-sections-header.open > tr > td:first-child > i {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.js-table-sections-header.open + tbody {
  display: table-row-group;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="js-table-sections table table-hover">
    <thead>
        <tr>
           <th style="width: 30px;"></th>
           <th>Name</th>
           <th style="width: 15%;">Access</th>
           <th class="hidden-xs" style="width: 15%;">Date</th>
        </tr>
    </thead>
                    
    <tbody class="js-table-sections-header open">
        <tr>
          <td class="text-center">
            <i class="fa fa-angle-right"></i>
          </td>
          <td class="font-w600">Sara Holland</td>
          <td>
              <span class="label label-danger">Disabled</span>
          </td>
          <td class="hidden-xs">
              <em class="text-muted">June 7, 2015 12:16</em>
          </td>
        </tr>
     </tbody>
     <tbody>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $92,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 19, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $54,00</td>
             <td>
                <small>Paypal</small>
             </td>
             <td class="hidden-xs">
               <small class="text-muted">June 16, 2015 12:16</small>
             </td>
         </tr>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $84,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 26, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $24,00</td>
             <td>
                 <small>Paypal</small>
             </td>
             <td class="hidden-xs">
                 <small class="text-muted">June 27, 2015 12:16</small>
             </td>
         </tr>
     </tbody>
     
    <tbody class="js-table-sections-header" v-for="list in myList">
        <tr>
          <td class="text-center">
            <i class="fa fa-angle-right"></i>
          </td>
          <td class="font-w600">Maya</td>
          <td>
              <span class="label label-danger">Disabled</span>
          </td>
          <td class="hidden-xs">
              <em class="text-muted">June 7, 2015 12:16</em>
          </td>
        </tr>
     </tbody>
     <tbody>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $82,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 19, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $24,00</td>
             <td>
                <small>Paypal</small>
             </td>
             <td class="hidden-xs">
               <small class="text-muted">June 16, 2015 12:16</small>
             </td>
         </tr>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $34,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 26, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $29,00</td>
             <td>
                 <small>Paypal</small>
             </td>
             <td class="hidden-xs">
                 <small class="text-muted">June 27, 2015 12:16</small>
             </td>
         </tr>
     </tbody>
 </table>

javascriptjqueryhtmlcssvue.js

Answer №1

If you want to iterate over a list in Vue, you can utilize the `template` tag along with `v-for`.

<template>
   <template v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </template>
</template>

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

Add a new external link to the Jquery Mobile webpage

Hello, I'm primarily a designer and my programming skills are quite limited. I am attempting to embed an external page into my jQuery Mobile webpage using external links, which works well in Safari. However, the issue arises when I save the web app t ...

jqueryajaxmobileexternal

Is it feasible to retrieve information within a behavior in Drupal?

I recently installed the "Autologout" Drupal module, which can be found at . This module includes a timer that ends your session if there is no activity on the page for a set period of time. However, I am interested in adjusting the timer value to better ...

javascriptjqueryajaxdrupaldrupal-modules

Refreshing a DIV element independently without the need to refresh the entire webpage

I need help with reloading only a specific div on my website. For example, if I navigate from site.com/?id=index to site.com/?id=hi, I want only the content within the div to be reloaded, nothing else. Appreciate any assistance. ...

phpjqueryajax

Is it possible to save round items within a session?

While utilizing Blocktrail's API for bitcoin wallet management, I encountered an issue with circular references within the returned wallet object. The goal is to store the decrypted wallet in the user's session to avoid password re-entry. Howeve ...

javascriptnode.jssessionexpress

When utilizing Nuxt SSR with vue-quill-editor, a ReferenceError stating "document is not defined

I'm facing an issue while incorporating Vue Quill Editor into my Nuxt SSR project. The error message 'ReferenceError document not defined' keeps popping up. <template> <section class="px-6"> <h1>I'm puzzled</ ...

vue.jsnuxt.jsserver-side-renderingrich-text-editorquill

Exploring the functionality of Kendo Grid within an Angular application

Currently, I am facing some challenges while trying to execute my Karma tests using the kendo grid within a fresh Angular project. The specifications for this specific component are outlined below: import { async, ComponentFixture, TestBed } from '@a ...

javascriptangularkendo-grid

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

htmlcsscss-selectors

Can one effectively handle local state in a Vue component using Vuex?

At the moment, I'm utilizing Vuex to manage state at the application level. I have a requirement to store data only within the lifecycle of Vue components. Is it feasible to utilize Vuex for storing local component states without involving the global ...

vue.jsvuex

Guide on how to optimize an ajax call in the browser to prefetch JSON data

One scenario I am dealing with involves initiating multiple ajax calls upon page load. The first call fetches data in JSON format from the server, and subsequent user interactions trigger further ajax requests that require database queries to process the J ...

javascriptjqueryajaxjsonperformance

Embracing PWAs with subdomains – seamless installation

One of my Progressive Web Applications (PWA) called app A contains a link to another app, app B. Initially, I hosted both apps on the same subdomain (for example: ) and everything worked perfectly - installing app A also installed app B. However, when I a ...

javascriptandroidangularprogressive-web-apps

VSCode displaying HTML errors within a .ts file

There is a strange issue with some of my .ts files showing errors that are typically found in HTML files. For example, I am seeing "Can't bind to 'ngClass' since it isn't a known property of 'div'" appearing over an import in ...

htmlangulartypescript

Exploring the functionality of event.target.name.value

I've been struggling to make event.target.name.value work for an input field in my form. When I submit the form, the values appear as null and I have to click twice to get them. This is the code I've written: const [name, setName] = useState(& ...

javascriptnode.jsreactjs

Transform date format using VueJS in JavaScript

I need to convert a date format from 19 Oct 2017 to 20171019. Is there a way to do this quickly? I am using FlatPickr in VueJs. Here is the code snippet for reference: import flatPickr from 'vue-flatpickr-component'; import 'flatpickr/dist/ ...

javascriptdatevue.jsflatpickr

blending the transition from dark image to black background

Utilizing the CSS below: #divPic { height: 32pc; background-image: url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg'); background-repeat: no-repeat; background-position: left center; b ...

htmlcss

Can you explain the distinction between the terms "vite" and "vite preview"?

I recently created a project template with the help of vite. While looking through my package.json file, I noticed the following section; "scripts": { "dev": "vite", "build": "vue-tsc --noEmit &&a ...

javascriptvue.jsvite

The paths of youngsters and the application of conditional styling

Here is the scenario I am dealing with: <div class="parent"> <div class"routeA"> <div class="header"> <li></li> <li class="p-highlight"></li& ...

csssass

What is the formula for determining the grid width when an item exceeds the column size?

I am working with a grid that matches the size of an image, which can be adjusted to be both smaller and larger in size. Within this grid, I have 6 items. Each item is wider than the columns in the grid. In order to achieve the desired width for the gri ...

csstailwind-css

I am looking to showcase a series of icons linked together by connecting lines

I have successfully designed the layout and added icons, but I am facing difficulty in creating connecting lines between them. I attempted to utilize CSS borders and pseudo-elements, yet I cannot achieve the desired outcome. If anyone could offer a CSS-ba ...

javascripthtmlcsscss-selectorsweb-frontend

Challenges with character encoding in NextJS

I am currently dealing with a line of code that creates a dynamic route. <Link href={`/bundeslander/${urlName}`} ><div className=" text-blue-400">{state.name}</div></Link> The variable urlName is generated by fetching dat ...

javascriptreactjsnext.jsencoding

Struggling to keep checkbox selected while paginating with jQuery

My pagination setup includes 4 buttons (first, move next, move back, and last) along with checkboxes that I want to maintain throughout the pagination process. The issue I'm facing is that when I select a checkbox, move to the next page, and then retu ...

asp.netjquery