Vue3按钮切换表格数据不渲染及TypeScript访问报错求助

原因 #

1. 方法调用名不匹配：模板中第一个按钮绑定的是staff方法，但methods里定义的是swap，点击后实际未执行交换逻辑。
2. 参数传递导致引用失效：即使调用正确的swap方法，传递的items和records是原数据的引用副本，方法内仅交换了局部变量的引用，并未修改data中的响应式属性，表格绑定的records未发生变化，因此不会重新渲染。
3. 未定义变量赋值无效：第二个按钮的temp = records代码中，temp不是组件的响应式变量，赋值操作无意义。

解决办法 #

• 修正按钮的方法绑定，直接调用swap方法，无需传递参数；
• 在swap方法中直接操作组件实例的items和records属性，通过解构赋值完成交换，确保修改的是响应式数据：

修改后的核心代码：

<template>
  <div>
    <button @click="swap">Staff</button>
    <button @click="swap">Orders</button>
  </div>
  <div>
    <b-table striped hover :items="records"></b-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Total',
  methods: {
    swap() {
      // 直接交换data中的响应式属性
      [this.items, this.records] = [this.records, this.items];
    }
  },
  // 其余data代码保持不变
});
</script>

原因 #

在TypeScript环境下使用Vue Options API时，直接导出普通对象作为组件选项，TS无法正确推断this的类型，因此无法识别this.items、this.records等自定义响应式属性，从而抛出TS2339错误。

解决办法 #

使用Vue提供的defineComponent方法包裹组件选项，它会帮助TS正确推断组件实例的类型，包括data、methods等属性：

完整修正后的TS代码：

<script lang="ts">
import { defineComponent } from 'vue';

// 可选：定义数据类型接口
interface Person {
  age: number;
  first_name: string;
  last_name: string;
  Тайтл: string;
}

export default defineComponent({
    name: 'Total',
    methods: {
        swap() {
            [this.items, this.records] = [this.records, this.items];
        }
    },
    data(): { items: Person[], records: Person[] } {
        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>

内容的提问来源于stack exchange，提问作者Евгений