Use Vue-tables-2 to select multiple rows by checking checkboxes and then add those rows to a separate array

Incorporating vue-tables-2 into my project, I designed a prototype featuring checkboxes in the first column with the following objectives:

  1. Enable selection of multiple rows
  2. Add selected rows to a new array
  3. Generate a PDF from this new array of table data

I successfully implemented the checkboxes in the column, but how can I transfer the selected rows into a new array so that I can create a PDF from it? Although I have the selectRow method, I am facing challenges in collecting all selected rows and adding them to a new array.

        <v-server-table url="/removals" :data="tableData" :columns="columns" :options="options">

            <input slot="selected" slot-scope="props" type="checkbox" :checked="props.row.selected" @click="selectRow">

            <button slot="afterFilter" type="submit" @click="createPdf">Create PDF</button>


        </v-server-table>

javascriptvue.jsvuejs2vue-componentvue-tables-2

Answer №1

Include checkedRows in your data object like this :

data(){
   return{
   ...
   checkedRows:[]
  }
  }

Update your template by adding 

v-model="checkedRows" :value="props.row"
:

     <v-server-table url="/removals" :data="tableData" :columns="columns" :options="options">

        <input slot="selected" slot-scope="props" type="checkbox" :checked="props.row.selected" v-model="checkedRows" :value="props.row">

        <button slot="afterFilter" type="submit" @click="createPdf">Create PDF</button>


    </v-server-table>

In your createPdf method, you can now access this.checkedRows

   methods:{
    ...
  createPdf(){
    //perform actions with this.checkedRows
  }  
  ...
  }

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

Encountering a problem with file upload in AngularJs

I am encountering an issue with my simple file upload code. The error message is being displayed as follows: https://i.sstatic.net/NAPYH.png Below is the code snippet causing the problem: <input type="file" name="student_image" onchange="angular.elem ...

javascriptangularjsfile-upload

Error encountered with Jquery script: "Unauthorized access"

I'm currently working on a script that involves opening a child window, disabling the parent window, and then re-enabling the parent once the child window is closed. Here's the code snippet: function OpenChild() { lockOpportunity(); if (Clinical ...

javascriptjqueryaccess-denied

Manipulate your table data with jQuery: add, update, delete, and display information with ease

When adding data dynamically to the table and attempting to edit, the checkbox value is not updating. This issue needs to be resolved. You can view the code in action on jsFiddle here on JSFiddle ...

javascriptjqueryhtml

Arranging the initial and final elements in an array (Sequential values are organized by grouping them with the first and last elements)

My task involves working with an object array containing time intervals, where Number 0 corresponds to Sunday. On my time scheduling page, I need to select different time ranges for a particular day and group the time values accordingly. The initial array ...

javascriptjqueryarraysobject

Addressing the reactivity issue when incorporating basic markdown directive into vuejs

In an effort to reduce dependency on vue-i18n formatting, I decided to create a simple Markdown formatter directive that only implements bold, emphasize, and strike-through styles. The current implementation of the directive is as follows: import _Vue ...

typescriptvue.jsvuejs2vue-i18n

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

javascript.nethtmlcssprinting

initialize input data in vue

How can I set a default value for an input in a date picker using Vue JS? I have tried setting the data but it's not showing up. When I inspect the element, I see this code: https://i.stack.imgur.com/fQDLL.png Here is my script: new Vue({ e ...

javascripthtmlvue.js

React - group several elements within a wrapping container

I am dealing with an array of words that make up sentences: let words = [ { "start_time": "2.54", "end_time": "3.28", "alternatives": [ { "confidence": "1.0", ...

javascriptreactjs

What is the best way to download and execute a Javascript script in real-time using the Javascript console?

Is there a quick JavaScript console command to download and run a script from a remote source? I am interested in finding an efficient method to obtain this specific script for interactive experimentation on various pages that may not have jQuery loaded. ...

javascriptjquerydebugging

prevent clicking on the div element

I have been attempting for quite some time to disable a click on a specific div element. The purpose behind this is to prevent unauthorized users from triggering certain events that are activated when the div is clicked. In my previous attempt shown below ...

javascriptjqueryhtml

Ensure to verify localStorage prior to loading the initial route in Vue to check for the presence of

I am currently working on a Vue app that involves some localStorage and server checks upon loading to determine the initial user route. This process takes place in the main entry component of the app, specifically within the created() hook. One issue I&ap ...

vue.jsvue-router

The reasons why script tags pointing to "localhost:3000" become unsuccessful

Currently in the process of revamping my company's web services, we are separating our static web files (HTML, CSS, JS) from our authentication server and API service. To maintain backward compatibility during our migration plan, we need to keep the o ...

javascripthtmlnode.jsexpress

Variations in syntax within TypeScript

I recently began delving into typescript and stumbled upon a unique way of defining the type of an argument. function postThread({userId}:{userId:string}) { // implementation code here } As opposed to the usual method shown below: function postThread({u ...

javascripttypescript

Show a DocumentFragment using VueJS

I have been working with a library called ProseMirror, which returns a DocumentFragment from JSON retrieved from the database. I am now trying to figure out how to display this content in my component. Despite spending two hours searching online, I have no ...

vue.jsdocumentfragment

Ways to design the Bootstrap accordion card that is currently open or expanded!

I'm currently working with a bootstrap 4 accordion and I would like to customize the border of only the .card elements that are in the "show collapse" state. var active = document.querySelector(".collapse.show"); active.parentNode.style.border = "1 ...

javascripthtmljquerycssbootstrap-4

Retrieving the value from an Object within a Mongoose query result

My query looks like this const result = await Form.findOne({ _id: req.params.id }); And here is the output of my query: { _id: 5a8ea110d7371b7e5040d5c9, _user: 5a5c277f8d82ba3644b971c2, formDate: 2018-02-22T10:53:04.579Z, formElement: { form ...

javascriptexpressmongoose

AngularJS JSON Array

I have an array containing multiple objects in JSON, as well as a select element that contains an array. Depending on the selection made in the first array, another select box will be dynamically loaded right below it. HTML Code <div class="list"> ...

javascriptarraysjsonangularjs

JavaScript code that only runs during the initial iteration of a loop

I am facing an issue while trying to develop a stopwatch for multiple users using PHP and JavaScript, with MySQL database for user data storage. The problem is that the stopwatch starts when I click on one user but does not work for others. I have attempte ...

javascriptphpstopwatch

Creating a nested array within each parent array and transferring values in JavaScript

I'm currently facing a situation where I need to insert new array objects named "timeSeriesData" and "units" inside each parent array object, and I also have to copy the values from the parent object into the "timeSeriesData". Any assistance on this w ...

javascriptnode.jsarraysobject

How to Make a Div Element Visible in the View Using the DOM?

I am working with a large number of div elements (around 4000). The first time the page loads, only the first div is set to have a style of display: block, while all others are hidden with display: none. Additionally, each div has a different height. < ...

javascriptjqueryhtmlcssperformance