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.

回答1:

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>   

回答2:

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.

来源：https://stackoverflow.com/questions/58027004/show-mutiple-v-dialog-boxes-with-different-content-in-vue-js