nuxtjs切换v-for循环生成的各个项

<template>
  <div>
    <button @click="toggleItems">切换项</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项1' },
        { id: 2, name: '项2' },
        { id: 3, name: '项3' }
      ],
      showItems: true
    };
  },
  methods: {
    toggleItems() {
      this.showItems = !this.showItems;
      if (this.showItems) {
        this.items = [
          { id: 1, name: '项1' },
          { id: 2, name: '项2' },
          { id: 3, name: '项3' }
        ];
      } else {
        this.items = [
          { id: 4, name: '项4' },
          { id: 5, name: '项5' },
          { id: 6, name: '项6' }
        ];
      }
    }
  }
};
</script>