template

<template>     
  <div>
   <button v-on:click="staff(items,records)" >
      Staff         
   </button>         
   <button v-on:click="temp = records">
      Orders         
   </button>     
  </div>     
  <div>
    <b-table striped hover :items="records"></b-table>     
</div>
 </template>

I want the table data to be swapped and displayed in the table on button click. To do this, I created a method that takes two list objects as a parameter and swaps them. In the console logs, the data changes, but for some reason the data in the table remains the same. After refreshing the page, the data is filled with the original data and nothing changes

Script

<script lang="ts">
export default {
    name: 'Total',
    methods: {
        swap(items, records) {
            const temp = items;
            items = records;
            records = temp;
        }
    },
    data() {
        return {
            items: [
                { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', Тайтл: 'Macdonald' },
                { age: 21, first_name: 'Larsen', last_name: 'Shaw', Тайтл: 'Macdonald' },
                { age: 89, first_name: 'Geneva', last_name: 'Wilson', Тайтл: 'Macdonald' },
                { age: 38, first_name: 'Jami', last_name: 'Carney', Тайтл: 'Macdonald' }
            ],
            records: [
                { age: 40, first_name: 'Фомин', last_name: 'Евгений', Тайтл: 'Macdonald' },
                { age: 21, first_name: 'Домолего', last_name: 'Захар', Тайтл: 'Macdonald' },
                { age: 89, first_name: 'Акулин', last_name: 'Александр', Тайтл: 'Macdonald' },
                { age: 38, first_name: 'Бобков', last_name: 'Илья', Тайтл: 'Macdonald' }
            ],
        }
    },

}
</script>  

EDIT: In some way i just can't get my $data in methods. I try

this.item
this.$data.items 
this.$data[items]

but every time i get error

TS2339: Property 'items' does not exist on type '{ swap(items: any, records: any): void; }.
    71 |         swap(items, records) {
    72 |             const temp = items;
 -> 73 |             this.items = records;
       |                  ^^^^^
    74 |             records = temp;
    75 |         },
    76 |     },

To fix that problem. I delete lang='ts' and it's start work.

- If someone knows why "ts" does not work correctly, please write an answer.

CodePudding user response：

Delete

<script lang = "ts">
//some code
</script>`

to

<script>
//some code
</script>

re-run serve

get back

<script lang="ts">
//some code
</script>

re-run serve

This works for me

CodePudding user response：

Try

        swap(items, records) {
            this.items = records;
            this.records = items;
        }

Your initial code only shuffles around values of local variables, but you need to change state variables