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.
The problem:
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.
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?
Bellow, you find my code. Thanks for the help.
vue.js code
<!– Main table –>
<b-row align-v=”start”>
<b-col sm=”8”>
<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”
<template slot=”name” slot-scope=”row”>
{row.item.name}
</template>
<template slot=”id” slot-scope=”row”>
{ row.item.id }
</template>
<template slot=”ref” slot-scope=”row”>
{row.item.ref}
</template>
<template slot=”specific” slot-scope=”row”>
{row.item.specific}
</template>
<template slot=”iso” slot-scope=”row”>
{row.item.iso}
</template>
<template slot=”tax” slot-scope=”row”>
{row.item.tax}
</template>
<template slot=”amount” slot-scope=”row”>
<span class=’dot largerSize’ :class=”statusColor[range(row.item.amount)]“></span>
</template>
</b-table>
</b-col>
<b-col sm=”4”>
Here comes the value selected.
<div v-for=”selectedvalue in selected” :key=”selectedvalue.id”>
{ selectedvalue.id } - {selectedvalue.name}
{selected}
</div>
</b-col>
</b-row>
<!– How is sorted? & Pagnation –>
<b-row align-v=”end” class=”mb-2”>
<b-col>
Sorting By: <b>{ sortBy | capitalize }</b>, Sort Direction:
<b>{ sortDesc ? ‘Descending’ : ‘Ascending’ }</b>
</b-col>
<b-col>
<b-pagination v-model=”currentPage” :total-rows=”totalRows” :per-page=”perPage” class=”my-0”></b-pagination>
</b-col>
<b-col>One of three columns</b-col>
</b-row>
Javascript
<script>
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 < this.minamount){
return 0;
}else if(x >= this.minamount && x <= this.maxamount ){
return 1;
}else if(x >= this.maxamount ){
return 2;
}
}
},
filters: {
// Function: captitalize the first letter
capitalize: function (value) {
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
Solution :
From my understanding, you replace all items in selected :
// Option: enables the storage of selected rows
rowSelected(items){
console.log(items[0].name)
this.selected = items
},
What you want to do is adding values, not replacing them, so IMHO what you should is something like :
// Option: enables the storage of selected rows
rowSelected(items){
console.log(items[0].name)
items.forEach(item => {
const selectedIds = this.selected.map(selectedItem => selectedItem.id);
// I guess you don’t want twice the same item in the array
if (!selectedIds.includes(item.id) {
this.selected.push(item)
}
})
},
