# Dropdown Replaced by SVG Image in Vue.js Teleport

**URL:** <https://discourse.nodered.org/t/dropdown-replaced-by-svg-image-in-vue-js-teleport/94577>\
**Category:** General\
**Tags:** dashboard-2\
**Created:** [13 January 2025 13:19 UTC](https://discourse.nodered.org/t/dropdown-replaced-by-svg-image-in-vue-js-teleport/94577 "2025-01-13T13:19:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)\
**Post date:** [13 January 2025 13:19 UTC](https://discourse.nodered.org/t/dropdown-replaced-by-svg-image-in-vue-js-teleport/94577/1 "2025-01-13T13:19:19Z")

</div>

I'm working on a Vue.js application where I want to render a dropdown in the app bar title using the `Teleport` component. However, the dropdown appears for a fraction of a second upon page load and is then replaced by an SVG image.

Here’s the code for the two `Teleport` components I'm using:

```auto
<template>
  <div>
    <div class="msg">
      <Teleport v-if="mounted" to="#app-bar-title">
        <v-form style="width: 200px">
          <v-autocomplete :items="topologies.map(topology => topology.name)" label="Select Topology"
            placeholder="Search for the topologies" clearable chips variant="underlined" closable-chips
            v-model="selectedTopology" style="max-width: 200px;">
          </v-autocomplete>
        </v-form>
      </Teleport>
      <Teleport v-if="mounted" to="#app-bar-title">
        <v-avatar>
          <v-img height="32px" src="/trace.svg"></v-img>
        </v-avatar>
      </Teleport>
    </div>
  </div>
</template>

```

I suspect there might be a conflict between the two `Teleport` components. How can I ensure that both elements (dropdown and image) can be displayed as needed?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [13 January 2025 13:44 UTC](https://discourse.nodered.org/t/dropdown-replaced-by-svg-image-in-vue-js-teleport/94577/2 "2025-01-13T13:44:18Z")

</div>

If you put both of them inside the same `<Teleport />` element, then they will render next to each other, rather than one replacing the other.