Javascript VueJS循环剩余

我有个小问题。我想创建一个循环来显示我的文章，问题是。我希望它永远不会是空的基本上，如果我有0篇文章，但。我想要10这个将显示10个骨架如果我有1个项目这将删除1个骨架以替换为我的项目

我不知道我是否足够清楚，所以这里有一个小图片。 基本上我有6个深灰色的矩形，但是如果我有1个，我只有5个，如果我有6个，我就没有深灰色的矩形了

<transition-group name="fade" tag="div" class="badge__grid">
        <template v-for="(n, i) in badges.data">
          <div :key="n + i" class="badge__item">
            <img
              class="badge__item--picture"
              :src="
                'https://images.habbo.com/c_images/album1584/' +
                  n.badge_code +
                  '.gif'
              "
              :alt="n.badge_code"
            />
            <span class="badge__item--code">
              {{ n.badge_code }}
            </span>
          </div>
        </template>
        <div
          v-for="i in badges.remaining"
          :key="i"
          class="badge__item badge__item--empty"
        ></div>
      </transition-group>

{{n.badge_code}

---

它可以工作，但我发现它太多了，我无法简化我的代码

您必须使用两个循环。使用计算属性可以进一步简化它：

<div v-for="a in articles" >
<h4>{{a.title}}</h4>
</div>
<div v-for="r in remaining" >
</div>

---

代码沙盒：

从合并/计算到固定长度数组到使用if/else v-if=“items[i]”模板的v-for=“i in 10”有很多方法，您都尝试了什么？非常感谢（很抱歉，我没有点击您的评论）Ibrahim mahrir

remaining(){
    let rem = 10 - this.articles.length;
    return(rem > 0?rem:0)
  }