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?
Resolved. I had to create a reactive reference
opDatawith emptytagsarrays and updated its value when toggling the OverlayPanel to ensure that it displays the correct data.