javascript - Vue 在 v-for 循环中动态地在组件之前添加一个组件

Question

我有一个关于如何在 v-for 循环内的动态组件(消息，可以是不同类型，需要不同的渲染)之前添加未读组件的问题。

这是我没有未读面板的示例代码。

<template>
    <div>
        <Message v-for="(message, index) in messages" :key="index" :message="message></Message>
    </div>
</template>

目标:

我想在未读消息前添加一个未读面板。很明显，它将在模板中添加一次。所以我希望其他开发人员在查看模板时，可以很容易地知道它完成了工作。

如何添加未读面板

方法一:

直接在模板中添加。

<template>
    <div>
        <template v-for="(message, index) in messages" :key="index">
            <Unread v-if="message.getId() === firstUnreadId"></Unread>
            <Message :message="message"></Message>
        </template>
    </div>
</template>

问题:

有很多不必要的检查以查看未读组件是否需要放置到 DOM 中，更不用说，开发人员很难知道未读组件只会加载一次。

方法二:

将未读组件放在消息中，并在消息中再添加一条消息，以便 v-for 循环将其标记为有效。

    <template>
        <div>
            <template v-for="(message, index) in messages" :key="index">
                <Message :message="message"></Message>
            </template>
        </div>
    </template>

    <template>
        <message :is="currentComponent"></message>
    </template>
    <script>
        export default {
            props: {
                message
            },
            computed: {
                currentComponent: function() {
                    switch (this.message.getType()) {
                         case "unread": 
                             return "Unread";
                         // ...
    
                    }
                }
            }
        }
    </script>

问题:

未读绝对不是消息，让它正常工作似乎是一种技巧。

我认为上面建议的任何方法都不是一个好方法，有人对此有任何解决方案吗？提前致谢。

Answer 1

我觉得方法 1 不错。正如您所说，方法 2 以后可能很难理解。否则，您可以直接在数组中的相应消息上设置 firstUnread 属性，然后对其进行测试。您可以在加载数组时执行此操作，或者可以使数组成为计算属性，以便在数组更改时重新计算 firstUnread。这有帮助吗？