我正在嘗試使用該插槽，但無論我嘗試什么，它似乎都不起作用。我將我的時間線分為 2 個部分。這是父組件：
<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>
得到了這個：
此外，檢查時頁面源中的日期文本沒有任何標志
uj5u.com熱心網友回復：
根據v-timeline docs，opposite當您將密集道具設定為<v-timeline>組件時，插槽不可用。
移除這個道具，插槽應該會出現。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/347768.html
標籤：html Vue.js vuetify.js
下一篇：計算字串中的所有元音