Vue3如何对数组固定循环5次，无对应元素时显示No Name？

问题核心 #

你之前的代码仅遍历长度为2的scoreBoardArray数组，自然只能渲染2条内容，无法满足固定输出5条的要求，以下提供两种可行实现方案：

方案1：计算属性补全数组（推荐） #

逻辑与视图分离，后续修改排序、占位规则更易维护：

1. 新增计算属性补全数组到固定长度5：

computed: {
  fullScoreBoard() {
    const result = [...this.scoreBoardArray]
    // 不足5位补占位对象
    while (result.length < 5) {
      result.push({ isPlaceholder: true })
    }
    return result
  }
}

2. 模板遍历计算属性即可：

<ul>
  <li v-for="(item, index) in fullScoreBoard" :key="item.id || `placeholder-${index}`">
    <span v-if="!item.isPlaceholder">{{ item.name }} {{ item.pts }} pts</span>
    <span v-else>No Name</span>
  </li>
</ul>

方案2：模板直接固定循环5次 #

无需修改JS逻辑，适合简单场景：

<ul>
  <!-- 直接循环固定次数，按索引取数组元素 -->
  <li v-for="(n, index) in 5" :key="index">
    <template v-if="scoreBoardArray[index]">
      {{ scoreBoardArray[index].name }} {{ scoreBoardArray[index].pts }} pts
    </template>
    <span v-else>No Name</span>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者Dariusz Legizynski