재사용 가능하고 동적인 탭 메뉴를 생성하는 데 사용하는 v-for 내부 구성 요소 사용

재사용 가능하고 동적인 탭 메뉴를 생성하는 데 사용하는 v-for 내부 구성 요소 사용

그래서 Vue 3과 슬롯이 있는 동적 탭 메뉴를 만들려고 합니다.탭이 작동하고 BaseTabWrapper와 BaseTab 구성요소가 있습니다.BaseTabWrapper 구성 요소 내부에서 BaseTab 구성 요소를 사용하여 v-for를 수행할 수 있어야 합니다.다음과 같이:

            <section
                id="content"
                class="w-full mx-2 pr-2"
                v-if="incomingChatSessions && incomingChatSessions.length"
            >
                <BaseTabsWrapper>
                    <BaseTab
                        v-for="chatSession in incomingChatSessions"
                        :key="chatSession.id"
                        :title="chatSession.endUser.name"
                    >
                        <p>{{ chatSession }}</p>
                    </BaseTab>
                </BaseTabsWrapper>
            </section>

응답에서 중요한 주의 사항은 들어오는 ChatSessions 개체가 비동기식이며 웹 소켓에서 온다는 것입니다(이 개체가 잘 작동하고 있으며 모든 데이터를 올바르게 가져오는 것은 빈 개체가 아니라는 것을 테스트했습니다).

BaseTabsWrapper 템플릿 내부.중요한 부분:

<template>
    <div>
        <ul
            class="tag-menu flex space-x-2"
            :class="defaultTagMenu ? 'default' : 'historic'"
            role="tablist"
            aria-label="Tabs Menu"
            v-if="tabTitles && tabTitles.length"
        >
            <li
                @click.stop.prevent="selectedTitle = title"
                v-for="title in tabTitles"
                :key="title"
                :title="title"
                role="presentation"
                :class="{ selected: title === selectedTitle }"
            >
                <a href="#" role="tab">
                    {{ title }}
                </a>
            </li>
        </ul>
        <slot />
    </div>
</template>

그리고 대본:

<script>
import { ref, useSlots, provide } from 'vue'
export default {
    props: {
        defaultTagMenu: {
            type: Boolean,
            default: true,
        },
    },
    setup(props) {
        const slots = useSlots()
        const tabTitles = ref(
            slots.default()[0].children.map((tab) => tab.props.title)
        )
        const selectedTitle = ref(tabTitles.value[0])
        provide('selectedTitle', selectedTitle)
        provide('tabTitles', tabTitles)
        return {
            tabTitles,
            selectedTitle,
        }
    },
}
</script>

다음은 Tab 구성 요소 템플릿입니다.

<template>
    <div v-show="title === selectedTitle" class="mt-4">
        <slot />
    </div>
</template>

<script>
import { inject } from 'vue'
export default {
    props: {
        title: {
            type: String,
            default: 'Tab Title',
        },
    },
    setup() {
        const selectedTitle = inject('selectedTitle')
        return {
            selectedTitle,
        }
    },
}
</script>

제 대본에서 중요한 부분과 저에게 많은 문제를 일으키고 있는 부분은 다음과 같습니다.

    const tabTitles = ref(
        slots.default()[0].children.map((tab) => tab.props.title)
    )

여기서 제가 하는 일은 각 슬롯의 "제목" 속성을 기반으로 탭 제목 배열을 만드는 것이지만 페이지를 로드할 때 API에서 더 많은 제목 요소를 가져오는 경우에도 이 배열은 항상 하나의 제목만 가집니다.한 가지 깨달은 것은 코드에서 페이지를 강제로 다시 렌더링하면 tabTitles 배열에 올바른 양의 요소가 포함되어 메뉴에 올바른 탭이 모두 표시된다는 것입니다."수신되는 ChatSessions" 배열을 숨기기 위해 웹 소켓에서 전송되는 데이터와의 비동기성을 제어하는 방식으로 모든 것이 정상적으로 작동하는지 테스트했지만 tabTiles는 어떤 일이 있어도 항상 하나의 요소만 얻습니다.

저는 그런 것을 할 것입니다:

computed(   
    () => slots.default()[0].children.map((tab) => tab.props.title) 
) 

구성 요소가 업데이트될 때 계산된 속성을 업데이트해야 합니다(슬롯 변경 등)

언급URL : https://stackoverflow.com/questions/71968544/using-v-for-inside-component-that-uses-slot-to-create-re-usable-and-dynamic-t