title: Row selection and pagination - Vue
body: <p>Using vue, I display my database in a table.
  My table contains a lot of rows. Therefore, I use pagination. 
  Using the select function, I can select multiple rows and store them in an array.</p>
  
  <p>The problem:</p>
  
  <ul>
  <li>I select some rows in my table. The data from the row is stored in my array called selected. I let them appear next to my table.
  Using pagination, I go to the next page. My data is still stored in this array. When I now select another row. My array is emptied, 
  my data from my section is gone.</li>
  </ul>
  
  <p>How can I solve this? Why does this happen? Is there a way to store this data so it isn't lost?
  Did I miss something? </p>
  
  <p>Bellow, you find my code. Thanks for the help. </p>
  
  <h1>Vue code</h1>
  
  <pre><code>   &lt;!-- Main table --&gt;
  &lt;b-row align-v="start"&gt;
      &lt;b-col sm="8"&gt;
          &lt;b-table class="col-sm-12"
              show-empty
              striped hover
              selectable
              stacked="md"
              :items="values"
              :fields="fields"
              :select-mode="selectMode"
              :current-page="currentPage"
              :filter="valueSearch"
              :sort-by.sync="sortBy"
              :sort-desc.sync="sortDesc"
              :sort-direction="sortDirection"
              @filtered="onFiltered"
              @row-selected="rowSelected"
  
              &lt;template slot="name" slot-scope="row"&gt;
                  {{row.item.name}}
              &lt;/template&gt;
              &lt;template slot="id" slot-scope="row"&gt;
                  {{ row.item.id }}
              &lt;/template&gt;
              &lt;template slot="ref" slot-scope="row"&gt;
                  {{row.item.ref}}
              &lt;/template&gt;
              &lt;template slot="specific" slot-scope="row"&gt;
                  {{row.item.specific}}
              &lt;/template&gt;
              &lt;template slot="iso" slot-scope="row"&gt;
                  {{row.item.iso}}
              &lt;/template&gt;
              &lt;template slot="tax" slot-scope="row"&gt;
                  {{row.item.tax}}
              &lt;/template&gt;
              &lt;template slot="amount" slot-scope="row"&gt;
                  &lt;span class='dot largerSize' :class="statusColor[range(row.item.amount)]"&gt;&lt;/span&gt;
              &lt;/template&gt;
          &lt;/b-table&gt;
      &lt;/b-col&gt;
      &lt;b-col sm="4"&gt;
          Here comes the value selected. 
          &lt;div v-for="selectedvalue in selected" :key="selectedvalue.id"&gt;
              {{ selectedvalue.id }} - {{selectedvalue.name}}
              {{selected}}
  
          &lt;/div&gt;
      &lt;/b-col&gt;
  &lt;/b-row&gt;
   &lt;!-- How is sorted? &amp; Pagnation --&gt;
  &lt;b-row align-v="end" class="mb-2"&gt;
      &lt;b-col&gt;
          Sorting By: &lt;b&gt;{{ sortBy | capitalize }}&lt;/b&gt;, Sort Direction:
          &lt;b&gt;{{ sortDesc ? 'Descending' : 'Ascending' }}&lt;/b&gt;
      &lt;/b-col&gt;
      &lt;b-col&gt;
          &lt;b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage" class="my-0"&gt;&lt;/b-pagination&gt;
      &lt;/b-col&gt;
      &lt;b-col&gt;One of three columns&lt;/b-col&gt;
  &lt;/b-row&gt;
  </code></pre>
  
  <h1>Javascript</h1>
  
  <pre><code>&lt;script&gt;   
  export default {
      props: ['valuedata','minamount','maxamount'],
      data() {
          return {
              values: this.valuedata,
              statusColor: ["red","orange","green"],
              totalRows: 1,
              currentPage: 1,
              perPage: 10,
              pageOptions: [5, 10, 20, 50,100],
              sortBy: "id",
              sortDesc: false,
              sortDirection: 'asc',
              filter: null,
              selectMode: 'multi',
              fixed: true,
              selected: [],
            fields: {
                  id: {
                      label: "Id",
                      sortable: true
                  },
                  name: {
                      label: "Name",
                      sortable: true
                  },
                  ref: {
                      label: "Ref",
                      sortable: true
                  },
                  iso: {
                      label: "Iso",
                      sortable: true
                  },
                  tax: {
                      label: "Tax",
                      sortable: true
                  },
                  specific: {
                      label: "specific",
                      sortable: true
                  },
                  amount: {
                      label: "amount",
                      sortable: true
                  }                    
              }
          } 
      },
       computed:{ 
          hits: function(){
              var hits = this.values.length
              return hits
          }            
      },
      mounted () {
          this.totalRows = this.values.length
  
      },
       methods: {
          onFiltered(filteredItems) {
              // Trigger pagination to update the number of buttons/pages due to filtering
              this.totalRows = filteredItems.length
              this.currentPage = 1
          },
          // Option: enables the storage of selected rows
          rowSelected(items){
              console.log(items[0].name)
              this.selected = items
          },
          // Function: color code amount
          range: function(x){
              if (x &lt; this.minamount){
                  return 0;
              }else if(x &gt;= this.minamount &amp;&amp; x &lt;= this.maxamount ){
                  return 1;
              }else if(x &gt;= this.maxamount ){
                  return 2;
              }
          }
      },
      filters: {
          // Function: captitalize the first letter
          capitalize: function (value) {
              value = value.toString()
              return value.charAt(0).toUpperCase() + value.slice(1)
           }
      }
  }
  </code></pre>
  
  <p></p>