Блог

Я создаю календарь с bg-primary для контейнера. Для каждой строки (недели) я использую b-строку с классом pb-2. Затем у меня есть отдельные b-col на несколько дней. В b-col для воскресенья используется px-2, в то время как в другие дни используются pr-2 и pl-0. Это дает мне желоб, который я желаю. Если я помещу код в свой основной компонент, все будет работать нормально. Однако, если я передаю дочернему компоненту массив на одну неделю дней, желоба не отображаются.

   *** CalendarGrid.vue <script> ***
  data() {
    return {
      days: [1, 2, 3, 4, 5, 6, 7],
    };
  },

  *** CalendarGrid.vue <template> ***
   <template>
    <b-row class="pb-2">
      <b-col class="px-2">
        <Day>{{ days[0] }}</Day>
      </b-col>
      <b-col
        v-for="(day, index) in days.slice(1)"
        :key="index"
        class="pr-2 pl-0"
      >
        <Day>{{ day }}</Day>
      </b-col>
    </b-row>
   </template>
  

Я хочу использовать дочерний компонент для отображения календарных дней, поскольку у меня есть дополнительные данные и форматирование для добавления к каждому дню. Day vue на данный момент просто отображает отправленное ему значение дня.

 *** Day.vue ***
<template>
  <div class="days text-right">
    <slot></slot>
  </div>
</template>
  

У меня есть дочерний компонент с именем Week.vue, который я вызываю, я хочу вызвать из CalendarGrid.vue

 <Week :days="days" />
  

Week.vue состоит из того же шаблона, что и выше. Разница лишь в том, что days — это реквизит массива. enter code here