在 vue.js 中显示具有不同内容的多个 v 对话框 [英] Show mutiple v-dialog boxes with different content in vue.js
本文介绍了在 vue.js 中显示具有不同内容的多个 v 对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理 Vue.js 模板，但我遇到了需要使用循环语句显示动态 v 对话框的问题，但现在它显示了所有内容.
多姆:
<div :key="item.category"><h4>{{ item.heading }}</h4><div v-for="item.content的子项":key="subitems.qus"><v-对话框v-model="对话框"宽度=500"><模板 v-slot:activator="{on}"><a href="#" v-on="on">{{subitems.qus}}</a></模板><v-card><v-card-titleclass="headline gray lighten-2"主标题>隐私政策</v-card-title><v-card-text>{{ subitems.ans }}</v-card-text><v-divider></v-divider></v-card></v-对话框></模板>
脚本:
出口默认{数据:() =>({常问问题，对话:假，}),}我不明白我怎么能做到这一点.如果我点击一个按钮，它会显示所有内容.
解决方案
必须为此设计一种模式，但快速的解决方案是为对话框的 v 模型创建布尔值数组.类似下面的东西
出口默认{数据:() =>({常问问题，dialog: []//数组而不是布尔值.}),}和
<div :key="item.category"><h4>{{ item.heading }}</h4><div v-for="(subitems, index) of item.content" :key="subitems.qus"><v-对话框v-model="对话框[索引]"宽度=500"><模板 v-slot:activator="{on}"><a href="#" v-on="on">{{subitems.qus}}</a></模板><v-card><v-card-titleclass="headline gray lighten-2"主标题>隐私政策</v-card-title><v-card-text>{{ subitems.ans }}</v-card-text><v-divider></v-divider></v-card></v-对话框>