Javascript 生成包含24个条目的列表，并检查对象中是否存在内容

我需要生成一个日历日概览，其中包含24个列表条目-每小时1个。如何组合

v-for=“（产品，索引）在产品中”

并检查

product.name.startTimeHour

每小时0-23

到目前为止，我所拥有的：

  <template  v-for="(product, index) in products">

    <product-item
      v-if="product.name.startTimeHour === '11'"
      :key="product.id"
      :index="index"
      :data="product"
    ></product-item>
    <template v-else>
    No entry for startTimeHour: [time]  
    </template>  

</template>

startTimeHour:[时间]无条目

（如果相关，我将使用此模板）

请检查

使用的标记：

{{product.name}
startTimeHour[{{hourNumber}}]没有条目

使用JS：

newvue({
el:“#应用程序”，
数据：{
产品：[
{
id:1，
名称：“产品一”，
开始时间：4
},
{
id:2，
名称:"产品二",，
开始时间：10
},
{
id:3，
名称:"产品三",，
开始时间：15
},
{
id:4，
名称:"产品四",，
开始时间：15
},
]
},
方法：{
getProductsNumPerHour（小时）{
返回此.products.filter（prod=>{
return prod.startTimeHour==hourNum
}).长度
}
}
})

在这里，我们首先遍历24小时数，然后遍历每个小时数内的所有现有产品，只渲染开始时间小时与当前时间小时数匹配的产品

还有一种辅助方法

getProductsNumPerHour（）

，用于检测给定小时数内没有产品的情况

---

我不确定您的代码

product.name.starttimehur

，看起来您的产品name属性是一个对象，但为什么不将starttimehur作为单独的产品属性，如我的示例所示。如果我遗漏了什么，请更详细地解释您的需求。

那么，您有24种产品吗？@lucas产品数量不断变化。这就是问题所在-例如，如果只有4种产品，如何生成24个条目？这确实需要更多信息才能正确回答，例如数据格式和对预期结果的更多解释。还有一个更有力的“你尝试了什么”。