Question

我正在编程一个页面，该页面在表格中显示会议列表。还可以编辑和删除会议。现在，我想使用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 devtools展示在两个meetings数组中（在组件以及另一个数组中） Vue实例）。使用控制台，我也可以在 window.meetings。
单击删除按钮（触发我的JS中的deleteMeetings方法）后，会议从表中消失，但仍保留在日历，在组件的meetings数组和 window.meetings。

即使在表中删除会议上，meetings数组也要保持同步，我该怎么做？请注意，我尚未为日历组件实现任何方法。

Answer 1

日历和表格组件应共享一个状态：当前选择的会议。据我了解，现在您在两个不同的位置拥有该状态：table Vue实例和一个calendar-component，它是其他一些Vue实例的子代。

看起来您已经与window.meetings共享了状态，但事实并非如此：创建组件时，您只能初始化同一组会议。然后，一个组件中的更改不会反映在另一组件中。

您可以尝试做的是将会议存储在页面的“主” Vue应用中，将其作为道具传递给表格和日历组件，然后在修改会议数组时触发表格和日历组件的事件。您还应该在“主” 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) {
            //
        },
    }
    //
});

我希望以上内容足以为您指明正确的方向。如果没有，请告诉我，我们将尽最大努力为您提供进一步的帮助。

具有VCalendar组件的Vue：使数据与另一个Vue实例保持同步

1 个答案: