Выбор строки и нумерация страниц - Vue

Question

Используя vue, я отображаю свою базу данных в виде таблицы.Моя таблица содержит много строк.Поэтому я использую нумерацию страниц.Используя функцию выбора, я могу выбрать несколько строк и сохранить их в массиве.

Проблема:

• Я выбираю несколько строк в своей таблице.Данные из строки хранятся в моем массиве с именем selected.Я позволил им появиться рядом с моим столом.Используя нумерацию страниц, я перехожу на следующую страницу.Мои данные все еще хранятся в этом массиве.Когда я сейчас выберу другую строку.Мой массив очищен, мои данные из моего раздела пропали.

Как я могу решить эту проблему?Почему это происходит?Есть ли способ сохранить эти данные, чтобы они не потерялись?Я что-то пропустил?

Беллоу, найди мой код.Спасибо за помощь.

Код Vue

   <!-- 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)
         }
    }
}

Answer 1

Насколько я понимаю, вы заменяете все элементы в selected:

// Option: enables the storage of selected rows
rowSelected(items){
    console.log(items[0].name)
    this.selected = items
},

То, что вы хотите сделать, это добавлять значения, а не заменять их, поэтому ИМХО, что вы должны сделать, это что-то вроде:

// 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 your array
        if (!selectedIds.includes(item.id) {
           this.selected.push(item)
        }
    })
},