在 vue.js 中显示具有不同内容的多个 v 对话框

Question

嗨，我正在处理 Vue.js 模板，但我遇到了需要使用循环语句显示动态 v-dialog 的问题，但现在它显示了所有内容。

多姆：

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

脚本：

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

我不明白我怎么能做到这一点。如果我单击一个按钮，则它会显示所有内容。

Answer 1

必须为此设计一个模式，但一个快速的解决方案是为对话框的 v 模型创建布尔值数组。像下面这样的东西

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

和

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