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

ffscu2ro 于 2023-04-28 发布在 Java

关注(0)|答案(3)|浏览(127)

我正在做Vue。js模板和我停留在一个点，我需要显示动态v对话框使用循环语句，但现在它显示了所有。
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

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

3条答案

按热度按时间

edqdpe6u1#

必须有一个设计模式，但一个快速的解决方案是为对话框的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>

赞(0）回复(0）举报 2023-04-28

qco9c6ql2#

兄弟，你犯了一个很小的错误，你不应该把你的v-dialog组件放在你的循环里，把这个从循环块里拿出来，不要把dialog当作空数组，保持它为false。

赞(0）回复(0）举报 2023-04-28

5ktev3wc3#

如果你想在v-dialog上循环，你的v-model值需要是一个布尔数组，你可以像这样传递索引v-model =“arrayOfBoolean[i]"。然后简单地创建两个函数以基于索引值打开和关闭。要打开你设置所选索引为真和关闭为假。希望这对你有帮助。

赞(0）回复(0）举报 2023-04-28