v-slot:opposite 不起作用。 vuetify 时间线项目答案

【问题标题】：v-slot:opposite doesn't work. vuetify timeline itemv-slot:opposite 不起作用。 vuetify 时间线项目
【发布时间】：2021-12-18 16:20:09
【问题描述】：

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

<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>

得到了这个：

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

【问题讨论】：

标签： html vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：