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

【问题标题】：Show mutiple v-dialog boxes with different content in vue.js在 vue.js 中显示多个具有不同内容的 v 对话框
【发布时间】：2019-09-20 10:53:55
【问题描述】：

嗨，我正在开发 Vue.js 模板，但我卡在了需要使用循环语句显示动态 v-dialog 的地方，但现在它显示了所有内容。

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>

脚本：

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

我不明白我怎么能做到这一点。如果我点击一个按钮，它就会显示全部。

【问题讨论】：

您想要的输出到底是什么？您将对话框的模型绑定到同一个变量，并且不想一次全部显示？

标签： javascript vue.js vuejs2 vuetify.js

【解决方案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>

【讨论】：

感谢您的回复，但它仍然显示所有弹出窗口，而不是单击特定按钮时显示单个弹出窗口。
嗨@VarinderSohal，你能显示你想要显示弹出窗口的特定按钮的代码吗？
太好了，你可以在这里回答你自己的问题，也许它会帮助别人

【解决方案2】：

兄弟，你犯了一个很小的错误，你不应该将 v-dialog 组件保留在循环中，将其从循环块中取出，不要将对话框作为空数组保持它为假。

【讨论】：