在VUEJS日历内的日期上显示名称

Question

我想在页面上显示日历上的标题，但标题没有显示。

这是它的HTML代码：

<div class="card-body pb-0">
<full-calendar
ref="refCalendar"
:options="calendarOptions"
class="full-calendar"
/>
</div>

在脚本中，我有这样的：

components: {
FullCalendar,
CalendarEventHandler,
},
data(){
return {
events:[]
}
},
methods:{
retrieveTutorials() {
UserDataService.getAll()
.then((response) => {
this.users = response.data.data;
for (const dataValue of Object.values(this.users)) {
this.name = dataValue.user_name
var date = dataValue.created_at
this.events = [
{
title: this.name,
date: moment(date).format('YYYY-MM-DD')
}
]
}
})
.catch((e) => {
console.log(e);
this.show = true
});
},
},
computed:{
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
events: this.events,
}
},
mounted () {
this.retrieveTutorials()
}
}

目前，日历正在显示，但日期内没有显示姓名，但在整合事件时，数据会到来。

以下是来自数据服务的响应：

data: [
0:{
"id":"22e9ae0a-b4e0-4b8b-99d2-1a133bb572b8",
"user_name":"test",
"address":"xxxxxxxxx",
"event_name":"test 1",
"created_at":"2021-05-19T12:00:00Z",
},
1:{
"id":"22e9ae0a-b4e0-4b8b-99d2-1a133bb572b8",
"user_name":"test 1",
"address":"xxxxxxxxx",
"event_name":"test 1",
"created_at":"2021-05-20T12:00:00Z",
},
]

请告知

Answer 1

更新的解决方案链接：https://codesandbox.io/s/determined-sun-jkc4d?file=/src/components/HelloWorld.vue

在解析UserDataService.getAll((之后，您可能不会将此.events传递给组件你可以试着把你的"；calendarOptions"；在计算属性中

calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
events: [],
}

作为

computed: {
calendarOptions () {
return {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
events: this.events
}
}
},

在数据中，你需要写events: []，然后你得到这个

<script>
export default {
data () {
return {
events: []
}
},
methods: {
retrieveUsers () {
UserDataService.getAll()
.then((response) => {
const usersData = response.data.data
for (const dataValue of Object.values(usersData)) {
const userName = dataValue.user_name
const eventDate = dataValue.created_at
this.events = [
{
title: userName,
date: moment(eventDate).format('YYYY-MM-DD')
}
]
}
})
}
},
computed: {
calendarOptions () {
return {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
events: this.events
}
}
},
mounted () {
this.retrieveUsers()
}
}
</script>