Vue는 v-for 루프 내의 구성 요소 앞에 하나의 구성 요소를 동적으로 추가합니다.

Vue는 v-for 루프 내의 구성 요소 앞에 하나의 구성 요소를 동적으로 추가합니다.

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>

문제:

읽지 않음은 절대 메시지가 아닙니다. 잘 작동시키기 위한 속임수인 것 같습니다.

위에서 제시한 방법 중 좋은 방법이 없을 것 같은데, 이에 대한 해결책이 있는 사람 있나요?잘 부탁드립니다.

방법 1이 좋을 것 같아요.방법 2는 나중에 이해하기 어려울 수 있습니다.그렇지 않으면 어레이 내의 적절한 메시지에 대해 첫 번째 읽기 취소 속성을 직접 설정한 다음 테스트할 수 있습니다.어레이를 로드할 때 이 작업을 수행하거나 어레이를 계산된 속성으로 만들어 어레이가 변경될 때마다 firstUnread가 다시 계산되도록 할 수 있습니다.도움이 되셨어요?

언급URL : https://stackoverflow.com/questions/57424409/vue-add-one-component-before-a-component-inside-v-for-loop-dynamically