CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Varinder Sohal
Varinder Sohal

Reputation: 1292

Show mutiple v-dialog boxes with different content in vue.js

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.

Upvotes: 0

Views: 4795

Answers (3)

sportsman
sportsman

Reputation: 79

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.

Upvotes: 0

shashi verma
shashi verma

Reputation: 973

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

Upvotes: 1

Asim Khan
Asim Khan

Reputation: 2049

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>

Upvotes: 6

Related Questions