Show/Hide All Actions in a Vue.js table using Bootstrap styling

In my Vue.js project, I created a bootstrap table to display data loaded from local JSON files. One of the features I added is the ability to Show/Hide details of specific rows, which shows a full message for that row. Now, I'm looking for a way to implement a checkbox or button to expand/collapse all rows at once, but I'm facing some challenges as it doesn't seem to work properly. My experience with Vue is limited, so any help would be appreciated. Here you can see how the app looks right now. You can view the code on CodePen, but please note that you won't be able to load it without the JSON file. And here's an example of the JSON data structure.

If you need more information about this app/project, feel free to ask!

This is the part of my code where I handle showing and hiding details of specific rows:

 <b-table 
    id="myTable" 
    class="text-center" 
    :small="small" 
    :bordered="bordered" hover head-variant="dark" 
    v-if="activeFields.length > 0" 
    stacked="md"
    :items="cptItems" :fields="activeFields" :current-page="currentPage" :per-page="perPage"
    :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" @filtered="onFiltered"
    :tbody-tr-class="rowClass"
    >    
    <template slot="actions" slot-scope="row">
        <b-button size="sm" @click="row.toggleDetails">
            {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        </b-button>
    </template>
    <template slot="row-details" slot-scope="row">
        <b-card>
            <b-card-text id="msg" class="text-break text-left" v-html="row.item.message"></b-card-text>
        </b-card>
    </template>
</b-table>

Answer №1

To simplify the process, you can create a function that iterates through each item in the table collection and sets _showDetails to either true for open or false for closed.

I also implemented a computed property in the codepen example that checks if any of the elements in the collection are open, returning true if that's the case. This allows for a single button to toggle all rows at once.

Link to CodePen Example

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

Sending the HTML input value to a Knockout view

Can someone assist me with a dilemma I'm facing? Within CRM on Demand, I have a view that needs to extract values from CRM input fields to conduct a search against CRM via web service. If duplicate records are found, the view should display them. Be ...

Responsive design in Android does not function as intended

My goal is to create a responsive design for my website, but I am encountering issues with importing the CSS files into the HTML. When I try to view the site in both the Windows version of Chrome and the Android version, all I see is a white screen. I am c ...

Attempting to display an HTML image utilizing data storage

I'm currently working on building a database for animals at an animal shelter. I have created tables containing species information and when a user selects a specific species, all available animals are displayed. Now, I want users to be able to click ...

Uploading files with Angular and NodeJS

I am attempting to achieve the following: When a client submits a form, they include their CV AngularJS sends all the form data (including CV) to the Node server Node then saves the CV on the server However, I am encountering difficulties with this proc ...

Performing a PHP Curl request and an ajax query to an ASP.NET page

I am attempting to send an ajax query to an ASP.NET page. Here is the algorithm I am following: 1. There is a form on my webpage; 2. When the user fills in all the fields, they click the submit button; 3. Upon clicking the submit button, JavaScript sends ...

Updating a Div on your webpage using a JQuery UI dialog: A step-by-step guide

I am currently trying to update my webpage from a JQuery UI dialog, but the code I have so far does not seem to be working. Any assistance or guidance would be greatly appreciated. function submit_new_site() { // These are the input text IDs on the ...

Unable to locate module post npm installation

My Node.js application is running on an Ubuntu server hosted on Microsoft Azure. The package.json file for my project includes various dependencies required for the app to function. { "author" : "Coop", "name" : "app-framework", "main" ...

What is the rationale behind having getters and mutations accept state, while actions accept context as their first argument in VUEX

Can you explain the reasoning behind getters and mutations accepting state as their first argument, while actions accept context? And how does this reflect the difference between the two, especially considering that context contains all properties of the ...

The issue with the jQuery click event arises when utilizing the "Module Pattern"

Exploring the Module Pattern as described by Chris Coyyer here, I, an intermediate front-end JS developer, have encountered a problem. Specifically, when attempting to utilize a jQuery selector stored in the settings object, I am unable to trigger a click ...

Challenge with timing in slideUp and slideDown animations (jQuery)

The element with the class "heady" is designed to slide up when the document height percentage is below 25%. If you scroll back up, it should reappear after a delay of 1400ms. The problem arises when this action needs to repeat, as the class does not sli ...

Replicate the ctrl+/- function through coding

While browsing with your browser, you have the ability to adjust the font size by using CTRL + + or CTRL + -. Is there a way to replicate this functionality through code, such as with JavaScript? I am looking to add buttons on my website that allow users ...

Continuously send HTTP requests to the page until receiving a status code of 200, then proceed to redirect to the same page

I am new to JavaScript and seeking advice on how to tackle this task. I have attempted the following approach, but it is not functioning correctly: while (status !== 200) { checkPage(); } function checkPage() { var xhr = new XMLHttpReque ...

Showcasing an HTML table using Material-UI

Currently, I have a list of issues being displayed in my browser using the material-ui code below: <Paper className={classes.root} elevation={4}> <Typography type="title" className={classes.title}> All Issues </Typography> ...

Selecting radio buttons across multiple div classes

I've been struggling to programmatically select specific radio buttons on a webpage. My goal is to automatically choose the second option in each group of radio buttons, but I'm getting lost in the syntax. Unlike most examples I've found on ...

Tips for including multiple directives in a component

Apologies in advance for my lack of clarity in expressing this question, which is why I am seeking assistance rather than finding the solution on my own. My query pertains to loading a component within another one and specifying it in the directive. Below ...

Testing Vuex getters with unit tests in Vue

In my component, I have a getter called defaultInternalAccountId that I am watching for changes. Whenever this property changes, the method fetchAccount is called. This method is also triggered when the component is mounted. My goal is to write a test that ...

What is the best way to add a separator in a b-dropdown menu once the options have been loaded using Vue?

Here is the code snippet for my dropdown element: <b-dropdown id="SchemaDropdown" name="SchemaDropdown" variant="form-control" class="" style="width: 100%" ...

Checking that an object's keys are all present in an array in TypeScript should be a top priority

I am working with a const object that is used to simulate enums. My goal is to extract the keys from this object and store them in an array. I want TypeScript to generate an error if any of these keys are missing from the array. // Enum definition. export ...

What could be the reason I am unable to choose data properties from the dropdown options?

There are two different dropdowns for clothing types and colors. When a type of clothing is selected from the first dropdown, JSON data will fill the second dropdown with options based on the first dropdown selection. After selecting an option from the se ...

Sophisticated method for implementing dynamic components with props in Vue

In a specific scenario, I am using an API to output all the content for my Page, including its structure. To provide context, imagine a CMS with a page builder feature where authors can place components via drag and drop to create pages, which are then del ...