Data rendering on the OverlayPanel using Vue js and PrimeVue

Question

Question on data rendering on the OverlayPanel using Vue.js

<template>
  <Column field="tags" header="Tags">
    <template #body="{ data }">
      {{ console.log( 'tags1 ', data.tags) }}
      <span class="more-tags" @click="toggle"> More </span>
      {{ console.log('tags2 ', data.tags) }}
      <OverlayPanel ref="op">
        <div v-for="tag in data.tags" :key="tag">{{ tag }}</div>
      </OverlayPanel>
    </template>
  </Column>
</template>

<script setup>
import { ref } from 'vue';
import OverlayPanel from 'primevue/overlaypanel';

const op = ref(null);

const toggle = (event) => {
  op.value.toggle(event);
};
</script>

data.tags is an array of objects like below

[
    "apartment",
    "third-floor",
    "Living Room",
    "Residential"
]

[
    "apartment",
    "fourth_floor"
]
[
   "mobile"
]

But on the overlayPanel, it always displays same data for example when I click on "More", it always displays mobile. I expected to dynamically display tags.

but console statement prints tags1 and tags2 correctly. Not sure why the OverlayPanel displays same data.

Any help?

Answer 1

Resolved. I had to create a reactive reference opData with empty tags arrays and updated its value when toggling the OverlayPanel to ensure that it displays the correct data.

<template>
  <Column field="tags" header="Tags">
    <template #body="{ data }">
      {{ console.log( 'tags1 ', data.tags) }}
      <span class="more-tags" @click="toggle"> More </span>
      {{ console.log('tags2 ', data.tags) }}
      <OverlayPanel ref="op">
        <div v-for="tag in opData.tags" :key="tag">{{ tag }}</div>
      </OverlayPanel>
    </template>
  </Column>
</template>

<script setup>
import { ref } from 'vue';
import OverlayPanel from 'primevue/overlaypanel';

const op = ref(null);
const opData = ref({ tags: [] });


// Function to toggle the OverlayPanel and update its data
const toggle = (event, data) => {
  const tags = data.tags;
  // Update OverlayPanel data (display tags from fourth element)
  opData.value = { tags: tags.slice(3) };
  op.value.toggle(event);
};
</script>