Создайте список из 24 записей и проверьте, присутствует ли содержимое в объекте

Question

Мне нужно создать обзор календарного дня с 24 списком записей - 1 в час. Как объединить v-for="(product, index) in products" и проверять 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>

(я использую Bento VueJS стартовый шаблон для этого, если необходимо)

Answer 1

Пожалуйста, отметьте этот пример .

Используемая разметка:

<div id="app">
  <div v-for="hourNumber in 24" class="hour-entry">
    <div
      class="product"
      v-for="(product, idx) in products"
      v-if="product.startTimeHour === hourNumber"
      key="product.id"
    >
      {{ product.name }}
    </div>
    <div v-if="getProductsNumPerHour(hourNumber) === 0">
      No entry for startTimeHour [{{ hourNumber }}]
    </div>
  </div>
</div>

Используется JS:

new Vue({
    el: '#app',

  data: {
    products: [
        {
        id: 1,
        name: 'Product One',
        startTimeHour: 4
      },
       {
        id: 2,
        name: 'Product Two',
        startTimeHour: 10
      },
      {
        id: 3,
        name: 'Product Three',
        startTimeHour: 15
      },
      {
        id: 4,
        name: 'Product Four',
        startTimeHour: 15
      },
    ]
  },

  methods: {
    getProductsNumPerHour (hourNum) {
        return this.products.filter(prod => {
        return prod.startTimeHour === hourNum
      }).length
    }
  }
})

Здесь мы сначала итерируем по номеру 24 часа, а затем по всем существующим продуктам внутри каждого часа нумерация и рендеринг только продуктов, чье время начала совпадает с номером часов текущего времени.

И есть вспомогательный метод getProductsNumPerHour() для обнаружения, когда у нас вообще нет продуктов для данного номера часа.

Я не был уверен в вашем коде product.name.startTimeHour, похоже, ваш продукт name свойство является объектом, но почему бы не разместить startTimeHour как отдельное свойство продукта, как в моем примере. Если я что-то упустил, пожалуйста, объясните ваши потребности более подробно.