Vue3js:如何在数组上循环5次，并有条件地检查里面的元素?

Question

请注意，我花了最后2h搜索通过SO的类似主题，得到一个解决方案，但失败了。这就是我现在向你求助的原因。

我正在努力实现以下目标:

我有一个带有一些结果的记分牌，它应该是这样的:

• 无名氏100分
• 约翰·史密斯50分
• 没有名字
• 没有名字
• 没有名字

我有一个名为scoreBoardArray的数组

data() {
return {
scoreBoardArray: [
{ id: '1', name: 'John Doe', pts: 100 },
{ id: '2', name: 'John Smith', pts: 50 },
],
}
},

我可以循环遍历它，但是当没有找到记录时，失败了5次，并且吐出了"No Name"

我的代码(以及我试图解决的问题):

<ul>
<li v-for="item in scoreBoardArray" :key="item.id">
<span v-if="item.id">{{ item.name }} {{ item.pts }}</span>
<span v-if="!item.id">No Name</span
</li>
</ul>

当然，我试图解决使用computed属性和简单的for(let i=0; i<6; i++) {...}循环的问题，但不知何故不能让它工作。

Answer 1

您可以使用计算属性对scoreBoardArray[]中的前5个元素进行切片，并获得所需的"No Name"虚拟项的数量(分别命名为topScores和dummyLength):

export default {
computed: {
topScores() {
return this.scoreBoardArray
.slice()                      // create a copy
.sort((a,b) => b.pts - a.pts) // sort by points
.slice(0, 5)                  // first 5
},
dummyLength() {
return Math.max(0, 5 - this.topScores.length)
}
}
}

并更新模板以渲染v-for中的计算道具，渲染topScores项目，然后渲染dummyLength虚拟项目:

<ul>
<li v-for="item in topScores" :key="item.id">
<span>{{ item.name }} ({{ item.pts }})</span>
</li>
<li v-for="n in dummyLength">No Name</li>
</ul>

演示

Answer 2

当然，这是可以通过计算属性实现的。

尝试在数组的末尾添加一些空对象，将其填充到5个值。

computed: {
scoreboard() {
let append = []
const appendCount = 5 - this.scoreBoardArray
for (let i = 0; i < appendCount; i++) {
append[i] = {}
}
return [...this.scoreBoardArray, ...append]
}
}

但是由于这些对象是空的，您将遇到v-for循环键的问题。为了解决这个问题，你可以使用索引作为键:

<li v-for="(item, index) in scoreboard" :key="index">