嵌套循环中的Vue数据(this.numberOfBars)超出范围

<template>
  <div>
    <div v-for="outerItem in validData" :key="outerItem.id">
      <!-- 外层循环 -->
      <div v-for="innerItem in outerItem.items" :key="innerItem.id">
        <!-- 内层循环 -->
        {{ innerItem.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberOfBars: 10, // 嵌套循环所需的数据，需进行合法性校验
      data: [
        { id: 1, items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }] },
        { id: 2, items: [{ id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }] },
        // 数据对象示例，包含有效的循环数据
      ],
    };
  },
  computed: {
    validData() {
      // 根据this.numberOfBars对this.data进行截取，保证循环数据不超出范围
      return this.data.slice(0, this.numberOfBars);
    },
  },
};
</script>