v-slot:opposite 不起作用。验证时间线项目

Question

我正在尝试使用该插槽，但无论我如何尝试，它似乎都无法正常工作。我将我的时间线分为两个部分。这是它的父组件：

<template>
  <v-container>
    <v-timeline align-top dense>
      <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>

这是log-message组件

<template>
  <v-timeline-item dense 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>

<script lang="ts">
import Vue from "vue";
import {
  ...
}
export default Vue.extend({
  props: {
    logMessage: {
      type: Object as () => LogMessage,
      required: true,
    },
  },
  data: () => ({}),
  computed: {
    color() {
      switch (this.logMessage.sevirity) {
        case Sevirity.INFO:
          return "success";
        case Sevirity.WARNING:
          return "warning";
        case Sevirity.ERROR:
          return "error";
        case Sevirity.FATAL:
          return "error";
        default:
          return "success";
      }
    },
    date() {
      return `${(this.logMessage.timestamp.getMonth() + 1)
        .toString()
        .padStart(2, "0")}/${this.logMessage.timestamp
        .getDate()
        .toString()
        .padStart(2, "0")}/${this.logMessage.timestamp
        .getFullYear()
        .toString()
        .padStart(4, "0")} ${this.logMessage.timestamp
        .getHours()
        .toString()
        .padStart(2, "0")}:${this.logMessage.timestamp
        .getMinutes()
        .toString()
        .padStart(2, "0")}:${this.logMessage.timestamp
        .getSeconds()
        .toString()
        .padStart(2, "0")}`;
      // return this.logMessage.timestamp.toISOString();
    },
  },
});
</script>

我也试过删除所有内容，然后在对面的插槽中显示一些内容，如下所示：

<template>
  <v-timeline-item dense class="mb-4" :color="color" small>
    <template v-slot:opposite>
      <span
        :class="`headline font-weight-bold white--text`"
        v-text="date"
      ></span>
    </template>
  </v-timeline-item>
</template>

得到这个：

另外，检查页面源代码中的日期文本时没有符号

Answer 1

根据 v-timeline docs，当您将 dense 属性设置为 <v-timeline> 组件时，opposite 插槽不可用。

删除这个道具，插槽应该出现。

v-slot:opposite 不起作用。验证时间线项目

v-slot:opposite doesn't work. vuetify timeline item

html

vue.js

vuetify.js