Hii I am working on the Vue.js template and I stuck at a point where I need to show dynamic v-dialog using looping statement but now it shows all.

Dom:

<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>     

Script:

export default {
      data: () => ({
         faq,
         dialog:false,
      }),
   }

I do not understand how I can do this. If I click on one button then it shows all.

Hii I am working on the Vue.js template and I stuck at a point where I need to show dynamic v-dialog using looping statement but now it shows all.

Dom:

<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>     

Script:

export default {
      data: () => ({
         faq,
         dialog:false,
      }),
   }

I do not understand how I can do this. If I click on one button then it shows all.

• javascript
• vue.js
• vuejs2
• vuetify.js

• What exactly is your desired output? You bind the model of the dialogs to the same variable, and you do not want to show up all at once? – vahdet Commented Sep 20, 2019 at 10:57

3 Answers 3

There must a design a pattern for this one but a quick solution would be to create array of booleans for v-models of dialogs. something like below

export default {
      data: () => ({
         faq,
         dialog: [] // Array instead of Boolean.
      }),
   }

and

<template v-for="item of faq">
    <div :key="item.category">
       <h4>{{ item.heading }}</h4>
       <div v-for="(subitems, index) of item.content" :key="subitems.qus">
          <v-dialog
             v-model="dialog[index]"
             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>   

Brother, you are doing a very small mistake, you should not keep your v-dialog ponent inside your loop, take this out from loop block and don't take dialog as empty array keep it false.

if you want to loop over the v-dialog your v-model value need to be an array of booleans where you pass the index in like this v-model ="arrayOfBoolean[i]". then simple create two function to open and close based on the index value. to open you set the selected index to true and to close false. hope this helps.