如何在 Vuejs 中重新渲染一个完整的日历组件

Question

我正在使用 vuejs 的 fullCalendar 库，删除事件时需要刷新组件

<div>
<FullCalendar :key="componentKey" v-model="FullCalendar"
locale="es"
:plugins="calendarPlugins"
:header="{
left: 'title',
center: '',
right: 'prev today next'
}"
:buttonText="{
today: $t('today')
}"
:events="EVENTS"
:selectable="true"
:editable="false"
@select="handleSelect"
@eventClick="handleEventClick"
/>
</div>

我已经尝试使用Watch和挂载的密钥刷新组件，但两者都没用，组件不刷新，仅在我尝试删除事件时才会发生

handleEventClick (arg) {
request.post('api/festivities/show', {day: arg.event._instance.range.start, name: arg.event._def.title})
.then(res => {
Swal({
position: 'top-end',
title: res.data.name,
html: 'information',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Eliminar'
}).then((result) => {
if (result === true) {
request.post('api/festivities/delete', {day: arg.event._instance.range.start, name: arg.event._def.title})
.then(answer => {
//this part should reset the component
//the best i could do is this line that reset the browser
this.$router.go()
})
}
})
}).catch(err => {
console.log(err)
this.$spinner.close()
})
}

我唯一能做的就是刷新路线。 实际上，该事件已从数据库中删除，但保留在视图中

Answer 1

您可以通过提供 ：key 属性来强制组件重新渲染，并在每次需要重建组件时更新它。

在您的情况下，您必须在该位置更改组件键

if (result === true) {
request.post('api/festivities/delete', {day: arg.event._instance.range.start, name: arg.event._def.title})
.then(answer => {
this.componentKey++;
this.$router.go()
})
}