Hello there! I am currently working on customizing a Vue.js template and I have encountered an issue with displaying dynamic v-dialogs using a looping statement. Currently, the dialog shows all at once instead of individually.
Here is the structure of my code:
<template v-for="item of faq">
<div :key="item.category">
<h4>{{ item.heading }}</h4>
<div v-for="subitems of item.content" :key="subitems.qus">
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{on}">
<a href="#" v-on="on">{{subitems.qus}}</a>
</template>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
{{ subitems.ans }}
</v-card-text>
<v-divider></v-divider>
</v-card>
</v-dialog>
</div>
</div>
</template>
Below is the script section:
export default {
data: () => ({
faq,
dialog:false,
}),
}
I am seeking guidance on how to modify the functionality so that each v-dialog only opens when its respective button is clicked, instead of showing all at once. Any help or suggestions would be greatly appreciated!