Question

我正在使用Vue CLI和Vuex创建一个应用程序。在身份验证后立即获取应用程序的初始操作中，我得到两种类型的数据：Messages和Events

应用程序中有一个地方需要使用Messages属性根据时间顺序合并Events和created_at。

这是Messages结构：

var messages = [
  {
    id: 1,
    name: 'Message 01',
    created_at: '2019-01-28T11:00:00+00:00'
  },
  {
    id: 2,
    name: 'Message 02',
    created_at: '2019-01-28T13:00:00+00:00'
  },
  {
    id: 3,
    name: 'Message 03',
    created_at: '2019-01-28T15:00:00+00:00'
  }
]

这是Events结构：

var events = [
  {
    id: 1,
    name: 'Event 01',
    created_at: '2019-01-28T10:00:00+00:00'
  },
  {
    id: 2,
    name: 'Event 02',
    created_at: '2019-01-28T12:00:00+00:00'
  },
  {
    id: 3,
    name: 'Event 03',
    created_at: '2019-01-28T14:00:00+00:00'
  }
]

合并所有内容后，我想使用一个循环来按时间顺序显示Messages和Events。

这是要使用的html结构：

.container{
  display: flex;
  flex-direction: column;
}

.container .message{
  background: red;
  margin-left: auto;
}

.container .event{
  background: blue;
  margin-right: auto;
}

<div class="container">
  <div class="message">Message</div>
  <div class="event">Event</div>
</div>

从商店收到此数据后，将两者合并的正确方法是什么？合并后，哪种方法可以正确循环显示您特定的Message中的每个Event或div？

Answer 1

要做的三件事：

无需直接转换API数据，使用2个数组中的计算值。
添加标识符以通知渲染逻辑数组中项目的类型。布尔值isMessage即可。
如果您的消息和事件的ID可能相似，则为数组中的项目添加新的唯一ID。

如果使用vuex，好的方法是使用getter获取计算值。在这里，我将提供一个使用Vue计算的示例。

<template>
    <div>
        <div v-for="item in combinedArray" :key="item.combinedId">
            <div v-if="item.isMessage">this is a message</div>
            <div v-else>this is an event</div>
        </div>
    </div>
</template>
<script>
export default {
    props: [ 'messages', 'events' ],
    computed: {
        combinedArray() {
            const array = [
                ...this.messages.map(m => ({
                    combinedId: `message_${m.id}`,
                    isMessage: true,
                    ...m
                })),
                ...this.events.map(e => ({
                    combinedId: `event_${e.id}`,
                    isMessage: false,
                    ...e
                }))
            ]
            return array.sort((itemA, itemB) => new Date(itemA.created_at) - new Date(itemB.created_at))
        }
    }
}
</script>

Vue-合并两种不同类型数据的正确方法

1 个答案: