Vue-tables-2 Select Multiple Rows with checkboxes then push rows to a new array

Question

Using vue-tables-2 - I made a prototype with the first column checkboxes and my goal is to:

1. Select multiple rows
2. Push this selection into a new array
3. Create a PDF of this new array of tableData

I was able to create the column of checkboxes, but how can I take the selected rows and push them into a new array in which I can generate a pdf from? I have the method selectRow but am struggling on how to gather all the selected rows and push them into 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>

Answer 1

add checkedRows to your data object as follow :

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

modify your template to this 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>

so in your createPdf method you are having access to this.checkedRows

   methods:{
    ...
  createPdf(){
    //do whatever you want with your this.checkedRows
  }  
  ...
  }