Question

我有一个问题，如何在v-for循环内的动态组件（消息，可以是其他类型，需要不同的呈现）之前添加未读组件。

这是我的示例代码，其中包含未读面板。

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

目标：

我想在未读邮件之前添加一个未读面板。显然，它将在模板中添加一次。因此，我希望其他开发人员在查看模板时，可以很容易地知道它已经完成了工作。

如何添加未读面板

方法1：

直接将其添加到模板中。

<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上，更不用说，开发人员很难知道未读组件将仅加载一次。

方法2：

将未读的组件放入消息中，然后在消息中再添加一条消息，以便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。有帮助吗？

Vue动态在v-for循环内的组件之前添加一个组件

如何添加未读面板

1 个答案: