时间戳

首页 > 解决方案 > BootstrapVue b-col 格式在子组件中不起作用

vuejs2 - BootstrapVue b-col 格式在子组件中不起作用

问题描述

我正在为容器创建一个带有 bg-primary 的日历。对于每一行（周），我使用 pb-2 类的 b 行。然后，我每天都有单独的 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

标签： vuejs2bootstrap-vue

解决方案

推荐阅读