我正在编程一个页面，该页面在表中显示会议列表。还可以编辑和删除会议。现在我想提供一个使用VCalendar的替代视图。
数据在页面加载时从服务器接收，并存储在JS变量中。包含该表的Vue实例和VCalendar组件都共享此数据。如果编辑表格单元格，所做的更改将反映在构件中但是当我在表格视图中删除一个日期时，它仍然保留在日历中
这是相关的HTML(编辑：为td添加了一些属性(：
<calendar-component></calendar-component>
<table id='meetings-table'>
<tr v-for='meeting in meetings' :key='date.id'>
<td contenteditable @blur='handleInput($event,meeting,"name")>
@{{ meeting.name }}
</td>
<td>
<input type='checkbox' v-model='selected'
:value='meeting.id'>
</td>
</tr>
</table>
<div>
<button v-if='selected.length' @click='deleteMeetings'>
Delete selected rows
</button>
</div>
我的JS(编辑：添加handleInput方法(：
let table = new Vue({
el:'#meetings-table',
data: {
selected: [],
meetings: window.meetings,
},
methods: {
/**
* Deletes selected meetings.
*/
deleteMeetings: function () {
let requests = [];
// Make a single request and store it
for (let id of this.selected) {
requests.push(axios.delete('/termine/' + id)
.then(response => {
// Remove meetings
this.meetings = this.meetings.filter(t => t.id != id);
// Remove id from list of selected meetings
this.selected = this.selected.filter(elem => elem != id);
}));
}
const axiosArray = axios.all(requests);
},
/**
* Handles edits in table cells.
*/
handleInput: function($event, meeting, field) {
const newValue = $event.target.textContent;
// Update value in $data
meeting[field] = newValue;
// AJAX request follows, but is not necessary for this example to work
}
}
});
组件的相关部分：
<template>
<v-calendar :attributes='attributes'>
<div
slot='meeting-row'
slot-scope='{ customData }'>
<!-- Popover content omitted -->
</div>
</v-calendar>
</template>
<script>
let meetings = window.meetings;
export default {
data() {
return {
incId: meetings.length,
editId: 0,
meetings,
};
},
computed: {
attributes() {
return [
// Today attribute
{
// ...
},
// Meeting attributes
...this.meetings.map(meeting => ({
key: meeting.id,
dates: new Date('2018,11,31'),// moment(meeting.slot.date, 'DD.MM.YY').format('YYYY, MM, DD'), //meeting.dates,
customData: meeting,
order: meeting.id,
dot: {
backgroundColor: '#ff8080',
},
popover: {
// Matches slot from above
slot: 'meeting-row',
}
}))
];
}
}
};
</script>
这就是发生的事情：
- 我加载的页面只包含一个会议。会议是显示在表和日历组件中。Vue开发工具展示它在两个
meetings阵列中(在组件中以及在另一个中Vue实例(。使用控制台，我也可以在中看到它window.meetings - 点击删除按钮(触发我JS中的
deleteMeetings方法(后，会议从表中消失，但仍在日历，位于组件的meetings数组中window.meetings
即使删除表中的会议，我也必须更改什么才能保持meetings阵列同步？请注意，我还没有为日历组件实现任何方法。
Calendar和表组件应该共享一个状态：当前选定的会议。据我所知，现在在两个不同的地方有这个状态：tableVue实例和一个calendar-component，它是其他Vue实例的子实例。
看起来您可能已经(与window.meetings(共享了状态，但事实并非如此：您只在创建组件时初始化同一组会议。然后，一个组件中的更改不会反映在另一个组件上。
您可以尝试将会议存储在页面上的"main"Vue应用程序中，将它们作为道具传递给表和日历组件，然后在修改会议数组时从表和日历部件触发事件。您还应该在"main"Vue应用程序中定义事件句柄，并监听组件。解决方案的草图：
<div id="app">
<table-component
:meetings="meetings"
@meetingUpdated="handleMeetingUpdate"
@meetingDeleted="handleMeetingDeletion"
></table-component>
<calendar-component
:meetings="meetings"
@meetingUpdate="handleMeetingUpdate"
@meetingDeleted="handleMeetingDeletion"
></calendar-component>
</div>
let app = new Vue({
el:'#app',
data: {
meetings: []
},
methods: {
handleMeetingUpdate(event) {
//
},
handleMeetingDeletion(event) {
//
},
}
//
});
我希望以上内容足以为你指明正确的方向。如果没有，请告诉我，我会尽我所能进一步帮助你。