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

What is the most effective way to send URL strings to the server-side click handler in a jQuery loop using $.each method?

As I work with URL values in my client-side script, I aim to generate links that can transmit these URL values back to my server-side click handler upon clicking. The server-side code /logclick logs the timestamp and destination of the click for auditing p ...

javascriptjquerydynamic-linking

What steps should I follow to enable a tooltip in this specific situation using qtip?

In my database, I have tables for venues, venue types, and map icons with the following relationships: A venue belongs to a venue type A venue type belongs to a map icon Each venue result is shown on the index page as a partial. Each partial ...

javascriptjqueryruby-on-railsqtip2

Is it possible to verify the presence of an ID with jQuery?

Is it possible to check for the existence of the id 'input-name' before assigning a value to the variable name using a line of code similar to this: var name = $('#input-name').attr("value"); In case the id 'input-name' does ...

javascriptjqueryhtml

Rails: jQuery - page refreshes unexpectedly during event execution

After successfully implementing a jQuery script for my custom dropdown menu on a standalone webpage, I encountered issues when integrating it into my Rails application. I am unsure if the problem is related to Turbolinks or if there is another underlying c ...

javascriptjqueryhtmlruby-on-railsturbolinks

Utilizing React to implement a search functionality with pagination and Material UI styling for

My current project involves retrieving a list of data and searching for a title name from a series of todos Here is the prototype I have developed: https://codesandbox.io/s/silly-firefly-7oe25 In the demo, you can observe two working cases in App.js & ...

javascriptreactjspaginationmaterial-uicodesandbox

Unable to populate data in dropdown using Angular framework?

My datatable displays elements along with an edit button. At the top of the page, there is also an add button. The purpose of the add button is to add elements to the list, while the edit button allows for editing the data in a particular row. When the u ...

javascriptangularangular-material

Ways to activate an event based on the dimensions (width/height) of

Exploring ways to implement an if statement based on specific width/height values using this code example. Check out the code snippet here My approach: <p id="confirmation">Try again!</p> <script> if (new dynamicSize.width() < ...

javascriptjquery

Exploring Javascript parameters with the power of jquery

Is it possible to pass a parameter from PHP into a JavaScript function within HTML? I am currently facing an issue where my code crashes when it reaches a certain condition. This is the code snippet causing the problem: $str="<input type='submit&a ...

phpjavascriptjqueryhtml

Is there a way to selectively display a portion of my CSS class based on certain conditions?

Is there a way to conditionally render all of the css inside the following hover psuedoclass based on a variable (data) being not null? Within my React Component that utilizes Material UI makeStyles, I have the following styles: const useStyles = makeStyle ...

cssreactjsmaterial-uipseudo-classconditional-rendering

Tips for customizing the background color of the MUI Menu Popover within a TextField that has the select property

In my quest to customize the appearance of a popover or menu in a TextField with the 'select' property, I referred to MUI customization docs for guidance. Successfully changing the text and label color of a TextField using the code below: const u ...

javascriptreactjsmaterial-ui

Identifying the specific promise that failed within a chain of .then statements

I am currently working on setting up a chain of promises with an error catch at the end within my node and express application. One issue I have encountered is that if any of the 'then' functions encounter an error, it can be difficult to trace b ...

javascriptnode.jsexpresspromisees6-promise

What is the best way to design a group of radio buttons with corresponding labels at the top

I'm looking to create a structure like this in HTML: Does anyone know how I can achieve this layout so that the labels are aligned properly with the radio buttons? My main challenge is getting the horizontal labels above each radio button. I would a ...

htmlcssradio-buttonsemantic-ui-react

Setting the column width and border-top in Highcharts

Hey there, I'm facing an issue with my highcharts diagram. 1) Can anyone help me adjust the column width to match the width of the month area? (I've tried changing "width" in CSS but it's not working) 2) Also, how can I remove all borders ...

javascripthtmlcsshighcharts

Steps to dynamically modify an HTML element within an Android WebView

https://www.bing.com/search?q=кму here I want to switch the bing icon to google I attempted : if (url == "https://www.bing.com/search?q=") { view.evaluateJavascript( ("\n"+ "wind ...

javascriptandroidkotlinwebview

Unable to access property 'name' of null object

I'm currently learning how to build a local library app using Express with The Odin Project's tutorial. Below are the relevant parts of my code: In routes/catalog.js, I have this: router.get("/books", book_controller.book_list); In models/book. ...

javascriptexpresscontrollerpug

How can I pass an object into EJS templates from views in Express 3.x?

Currently, I am utilizing ejs templates in combination with node.js and express 3.x. Is there a way to display the data object that is passed into the view? Can it be achieved similar to this example in index.ejs: <%= dump(session) %> ...

javascriptnode.jsexpressejs

The Art of Validating Forms in Vue.js

Currently I am in the process of developing a form with validation using Vue, however, I've run into some errors that are showing up as not defined even though they are currently defined. HTML <form class="add-comment custom-form" @submit="checkF ...

javascripthtmlvue.js

React Native Function fails to return a value

Within my React Native app, there's a page called RepsPage that displays a scroll view using an array of IDs. I'm passing this array to a function named renderRep, attempting to create a view for each item in the array. However, the return statem ...

javascriptreact-native

How can the data controller of a model be accessed within a directive that has been defined with "this"?

I'm struggling with accessing data using a directive, especially when I have defined my models like this: vm = this; vm.myModel = "hello"; Here is an example of my directive: function mySelectedAccount(){ return { restrict: 'A&ap ...

javascriptangularjs

What steps can I take to prevent a css-generated svg file from occupying more space than the original image? My wave appears to be 239px tall, while the svg file is a massive 1500px in height

I utilized an online tool to generate custom SVG CSS at this link: Upon implementing it on my webpage, the rendering seems correct in terms of height and width. However, upon inspecting the page, I noticed that the SVG file dimensions are 1512px by 1512px ...

csssvg