Показать несколько v-диалоговых окон с различным содержимым в vue.js

Question

Hii Я работаю над шаблоном 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,
      }),
   }

Я не понимаю, как я могу это сделать.Если я нажму на одну кнопку, она покажет все.

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>   

Answer 2

Брат, вы делаете очень маленькую ошибку, вы не должны держать свой компонент v-dialog внутри цикла, извлекать его из блока цикла и не брать диалог, поскольку пустой массив сохраняет его ложным.