Vue3js：如何准确地循环数组 5 次并有条件地检查里面的元素？

Posted 2023-02-22

【中文标题】Vue3js：如何准确地循环数组 5 次并有条件地检查里面的元素？

【英文标题】：Vue3js: how to loop over array exacly 5 times and conditionaly check elements inside?

【发布时间】：2021-10-13 13:10:45

【问题描述】：

请注意，我花了最后 2 小时搜索 SO 的类似主题，以找到解决方案，但失败了。这就是我现在向你寻求帮助的原因。

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

我有一个记分牌，上面有一些结果，应该是这样的：

John Doe 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++) ... 循环来解决问题，但不知何故无法使其正常工作。

【参考方案1】：

您可以对slice 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>

demo

【讨论】：

如果您的意思是“重复键”，则在第二个循环中无关紧要。它们都被渲染到相同的元素，所以它们真的不需要键控。

【参考方案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">