i have a question about toTeleport function, please help

[tansonkk]

why the background of node still here after called the toTeleport function?

<VueFlow style="height: 80vh;" v-model="elementList" :snap-grid="[50, 50]" :snap-to-grid="true">
  <template #node-resizable="props">
    <ResizeRotateNode v-if="props.data.showOnFloorPlan" v-bind="props" :rotatable="false" v-on:resize="onResize" height=""
      :key="props.id">
      <div style="padding: 3px">name : {{ props.label }}</div>
      <div style="padding: 3px">floor : {{ props.data.floorName }}</div>
      <div style="padding: 3px">type : {{ props.data.tableType }}</div>
      <div style="padding: 3px">status : {{ props.data.status }}</div>
      <button class="sticky-bottom w-100" @click="toTeleport(props)" :id="props.id">to teleport
      </button>
      <button class="sticky-bottom w-100" @click="showUpdateForm(props)" :id="props.id">edit </button>
    </ResizeRotateNode>
    <teleport to="#port">
      <div v-if="!props.data.showOnFloorPlan" v-bind="props" :rotatable="false" :key="props.id"
        class="border border-success position-relative h-100 m-2 rounded">
        <div style="padding: 3px">name : {{ props.label }}</div>
        <div style="padding: 3px">floor : {{ props.data.floorName }}</div>
        <div style="padding: 3px">type : {{ props.data.tableType }}</div>
        <div style="padding: 3px">status : {{ props.data.status }}</div>
        <button @click="toTeleport(props)" :id="props.id" class="sticky-bottom w-100">to floor plan
        </button>
        <button class="sticky-bottom w-100" @click="showUpdateForm(props)" :id="props.id">edit </button>
      </div>
    </teleport>
  </template>
  <Background variant="lines" gap="50" height="100" width="100" />
</VueFlow>




    const newTableList = list.map((table) => ({
      id: table._id,
      type: "resizable",
      label: table.name,
      position: { x: table.posX, y: table.posY },
      style: {
        background: '#fff', border: '2px solid black',
      },
      height: table.height,
      width: table.width,
      data: { floorName: findFloorName(table.floorId), floorId: table.floorId, typeName: table.name, tableType: table.type, status: table.status, showOnFloorPlan: true, remarks: table.remarks }
    }))
    elementList.value = newTableList

const toTeleport = (props) => {
props.data.showOnFloorPlan = !props.data.showOnFloorPlan;

}

[bcakmakoglu]

Probably because you have css applied to the element that is not teleported outside 😄

Do you have some css like .vue-flow__node-custom or sth?

[tansonkk]

i only imported the css of resizable node(import "@vue-flow/core/dist/style.css"), but i guess it is not related.
this bug happen after added the height and width
const newTableList = list.map((table) => ({
id: table._id,
type: "resizable",
label: table.name,
position: { x: table.posX, y: table.posY },
style: {
background: '#fff', border: '2px solid black',
},

height: table.height,

width: table.width,

  data: { floorName: findFloorName(table.floorId), floorId: table.floorId, typeName: table.name, tableType: table.type, status: table.status, showOnFloorPlan: true, remarks: table.remarks }
}))

i remember that if i remove this two key value pair, it would be find , but i need to change the size base on the data what i fetched

[bcakmakoglu]

style: {
background: '#fff', border: '2px solid black',
},

That's where your problem is, you add these styles to the node wrapper which is not the same element that you're trying to teleport.

[tansonkk]

Thank !! many help for me