Vue 在 v-for 循环内动态添加一个组件答案

【问题标题】：Vue add one component before a component inside v-for loop dynamicallyVue 在 v-for 循环内动态添加一个组件
【发布时间】：2019-08-09 06:20:32
【问题描述】：

我有一个问题，关于如何在 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>

问题：

未读绝对不是消息，它似乎是让它运作良好的技巧。

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

【问题讨论】：

it is difficult for developer to know that unread component will only be loaded once我不同意，条件很明确

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

【讨论】：