Vuetify的v-timeline-item组件v-slot:opposite插槽无法生效问题

问题原因 #

Vuetify的<v-timeline>组件默认仅渲染单侧内容，v-slot:opposite插槽只有在开启双侧布局时才会被渲染，你未给<v-timeline>配置对应的开启属性，所以插槽内容不会输出到DOM中。

解决方法 #

步骤1：修改父组件v-timeline配置 #

给<v-timeline>添加side属性开启双侧布局，属性值决定插槽位置：

<template>
  <v-container>
    <!-- side="left"表示opposite插槽内容在时间线左侧，默认内容在右侧 -->
    <v-timeline align-top dense side="left">
      <v-slide-x-transition group>
        <template v-for="(item, index) in logs">
          <log-message :key="index" :logMessage="item" />
        </template>
      </v-slide-x-transition>
    </v-timeline>
  </v-container>
</template>

如果需要opposite插槽内容放在时间线右侧，将side属性值改为right即可。

步骤2：兼容低版本Vuetify（可选） #

如果你使用的是Vuetify 2.3.x及以下的早期版本，需要额外给<v-timeline-item>添加opposite属性才能触发插槽渲染，修改子组件代码如下：

<template>
  <!-- 新增opposite属性适配低版本 -->
  <v-timeline-item dense opposite class="mb-4" :color="color" small>
    <template v-slot:opposite>
      <span :class="`headline font-weight-bold`" v-text="date"></span>
    </template>
    <v-row justify="space-between">
      <v-col cols="8" v-text="logMessage.message"></v-col>
      <v-col class="text-right" cols="4" v-text="date"></v-col>
    </v-row>
  </v-timeline-item>
</template>

内容的提问来源于stack exchange，提问作者ATT