Nuxt•3mo ago

Multiple UBanners are dismissed when only 1 is dismissed

I have a component that displays banners (AppBanner). It fetches them from the server and displays all banners. Users can dismiss them, what I encounter is when you dismiss banner-1 - rest of the banners (banner-2, banner-3) are also dismissed and are not shown anymore. Also new banners are not visible. Here's the code

<script setup lang="ts">
const { data, error } = useFetch("/api/banner", { key: "banner" })

const validBanners = computed(() => {
    return data.value && Array.isArray(data.value) ? data.value : []
})

if (error.value) {
    console.error("Error fetching banner:", error.value?.data || error.value?.message || "Unknown error")
}

onMounted(() => {
    if (import.meta.client) {
        data.value?.forEach((banner) => {
            const isStored = localStorage.getItem(`banner-${banner.id}`)
            console.log(`Banner ${banner.id}: localStorage =`, isStored)
        })
    }
})
</script>

<template>
    <div v-for="banner in validBanners" :key="banner.id">
        <UBanner
            :id="banner.id.toString()"
            :title="banner.message"
            :color="banner.color"
            :icon="banner.icon"
            :actions="banner.actions || []"
            close
        />
    </div>
</template>

<script setup lang="ts">
const { data, error } = useFetch("/api/banner", { key: "banner" })

const validBanners = computed(() => {
    return data.value && Array.isArray(data.value) ? data.value : []
})

if (error.value) {
    console.error("Error fetching banner:", error.value?.data || error.value?.message || "Unknown error")
}

onMounted(() => {
    if (import.meta.client) {
        data.value?.forEach((banner) => {
            const isStored = localStorage.getItem(`banner-${banner.id}`)
            console.log(`Banner ${banner.id}: localStorage =`, isStored)
        })
    }
})
</script>

<template>
    <div v-for="banner in validBanners" :key="banner.id">
        <UBanner
            :id="banner.id.toString()"
            :title="banner.message"
            :color="banner.color"
            :icon="banner.icon"
            :actions="banner.actions || []"
            close
        />
    </div>
</template>

8 Replies

kapa.ai•3mo ago

Hi @lazygopher. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The behavior you're seeing—where dismissing one UBanner causes all banners to disappear—is due to how the UBanner component manages its dismissed state. According to the documentation, when a UBanner is closed, it stores a key in localStorage with the format banner-${id} to prevent it from being displayed again. For example, closing a banner with id="example" will store banner-example in localStorage. This mechanism is intended to persist the dismissed state for each unique banner by its id, not globally for all banners UBanner usage. However, if all your banners share the same id or if the id is not unique per banner, dismissing one will cause all banners with that id to be hidden. In your code, you are correctly passing banner.id as the id prop, but you should ensure that each banner from your API has a unique id. Another possible issue is that after dismissing a banner, your validBanners computed property does not filter out banners that have been dismissed (i.e., those with a corresponding banner-${id} key in localStorage). As a result, when the component re-renders, all banners with a stored key in localStorage will be hidden by UBanner's internal logic, making it seem like all banners are dismissed—even new ones if their id matches a previously dismissed one. To fix this: - Filter out banners that have already been dismissed before rendering them. You can do this by checking localStorage for each banner's id. Here's how you can update your computed property:

const validBanners = computed(() => {
  if (!data.value || !Array.isArray(data.value)) return []
  if (import.meta.client) {
    return data.value.filter(
      banner => !localStorage.getItem(`banner-${banner.id}`)
    )
  }
  return data.value
})

const validBanners = computed(() => {
  if (!data.value || !Array.isArray(data.value)) return []
  if (import.meta.client) {
    return data.value.filter(
      banner => !localStorage.getItem(`banner-${banner.id}`)
    )
  }
  return data.value
})

This ensures only banners that have not been dismissed (i.e., not present in localStorage) are rendered. Summary:
- Each UBanner uses its id to persist its dismissed state in localStorage. - If you do not filter out dismissed banners in your computed property, all banners with a stored key will be hidden by UBanner, making it appear as if all are dismissed. - Filter your banners before rendering to show only those not dismissed UBanner usage. If you follow this approach, each banner will be dismissed independently, and new banners with unique ids will appear as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@693201794137981049> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

lazygopherOP•3mo ago

@kapa.ai each banner has unique id. When I log them in console I get

Banner 3: localStorage = null banner.vue:20:12
Banner 2: localStorage = null banner.vue:20:12
Banner 1: localStorage = true banner.vue:20:12

Banner 3: localStorage = null banner.vue:20:12
Banner 2: localStorage = null banner.vue:20:12
Banner 1: localStorage = true banner.vue:20:12

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your console output:

Banner 3: localStorage = null
Banner 2: localStorage = null
Banner 1: localStorage = true

Banner 3: localStorage = null
Banner 2: localStorage = null
Banner 1: localStorage = true

and the fact that each banner has a unique id, your setup appears correct regarding unique identifiers. According to the Nuxt UI documentation, when a UBanner is closed, it stores a key in localStorage with the format banner-${id}. For example, if you close banner 1, banner-1 will be set in localStorage, and UBanner will not display it again. This should not affect banners with other ids, such as banner 2 or banner 3 UBanner usage. If dismissing one banner is still causing all banners to disappear, and your console log confirms that only the relevant key is set in localStorage, then the issue is likely not with the UBanner component itself, but possibly with how your data is being managed or re-fetched after a banner is dismissed. Key points from the documentation: - UBanner only hides itself if its own banner-${id} key is present in localStorage. - Other banners with different ids should not be affected UBanner usage. What to check: - Ensure that your API does not return the same id for multiple banners. - Make sure your validBanners computed property is not being reset or emptied after a banner is dismissed. - Confirm that your data fetching logic does not re-fetch and filter out all banners after any banner is dismissed. Summary:
Based on the knowledge sources, UBanner should only hide itself when its own id is dismissed and stored in localStorage. If you are seeing all banners disappear, the knowledge sources do not provide enough information to explain this behavior beyond what is described above. Double-check your data flow and ensure that only the relevant banner id is being stored and filtered out. If you continue to experience this issue, please provide more details about how your data is managed after a banner is dismissed, as the knowledge sources do not explicitly cover this scenario beyond the localStorage mechanism UBanner usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@693201794137981049> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

lazygopherOP•3mo ago

@kapa.ai in Vue tools I see only 2 UBanner components but none of them is actually seen in the UI. I don't refresh the data after modifications to banners. I tried to add an additional static banner and now I see all the 4 even though I dismissed one.

<template>
    <div v-for="banner in validBanners" :key="banner.id">
        <UBanner
            :id="banner.id.toString()"
            :title="banner.message"
            :color="banner.color"
            :icon="banner.icon"
            :actions="banner.actions || []"
            close
        />
    </div>
    <UBanner id="test" title="banner.message" close />
</template>

<template>
    <div v-for="banner in validBanners" :key="banner.id">
        <UBanner
            :id="banner.id.toString()"
            :title="banner.message"
            :color="banner.color"
            :icon="banner.icon"
            :actions="banner.actions || []"
            close
        />
    </div>
    <UBanner id="test" title="banner.message" close />
</template>

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, the UBanner component uses the id prop to manage its dismissed state via localStorage. When you dismiss a banner, only the banner with the matching id should be hidden, and this is controlled internally by UBanner. Other banners with different ids should not be affected, and static banners (like your test banner) should always appear unless their id is also present in localStorage UBanner usage. If you see UBanner components in Vue Devtools but they are not visible in the UI, it is likely because their corresponding localStorage key (e.g., banner-1) is set, so UBanner hides itself. This is expected behavior per the documentation. When you add a static banner with a unique id (like id="test"), it appears because there is no banner-test key in localStorage. This confirms that the hiding logic is working as intended: only banners with their id present in localStorage are hidden. Summary of what the knowledge sources confirm: - UBanner hides itself if localStorage contains banner-${id}. - Other banners with different ids are not affected. - Static banners with unique ids will always show unless dismissed and their id is stored in localStorage. - The component is still present in the DOM (and Vue Devtools) even if hidden, because UBanner manages its own visibility. If you are not refreshing or mutating your data after dismissing a banner, and you see the correct number of UBanner components in Vue Devtools, this matches the expected behavior described in the documentation. If you want to show banners again, you need to remove the corresponding key from localStorage. The knowledge sources do not provide further troubleshooting steps for cases where banners are not visible despite not being dismissed, so if you encounter that, you may need to check for issues outside of what is covered in the documentation UBanner usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@693201794137981049> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Multiple UBanners are dismissed when only 1 is dismissed

Did you find this page helpful?