为什么当我把 v-dialog 放在 v-for 中时，我不能多次点击，Firefox 会变慢

Question

我想知道为什么当我在 v-for 中使用 v-dialog 时，我多次尝试重新打开和关闭对话框 它会关闭 firefox，firefox 挂起，我必须关闭 firefox

这是代码

<template>
    <v-row>
        <v-col v-for="n in 6" :key=n>
            <v-card
            >
                <v-card-actions>
                    <div class="text-center">
                        <v-dialog
                        v-model="dialog"
                        width="500"
                        >
                        <template v-slot:activator="{ on, attrs }">
                            <v-btn
                            v-bind="attrs"
                            v-on="on"
                            >
                            Click Me
                            </v-btn>
                        </template>

                        <v-card>
                            <v-divider></v-divider>

                            <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                color="primary"
                                text
                                @click="dialog = false"
                            >
                                I accept
                            </v-btn>
                            </v-card-actions>
                        </v-card>
                        </v-dialog>
                    </div>
                </v-card-actions>
            </v-card>
        </v-col>
    </v-row>
</template>

这是代码，只有 return for v dialog

<script>
export default {
    data(){
        return {
            dialog: false
        }
    }
}
</script>

上面的代码是纯 v-dialog vuetify，我只把它放在卡片中

Answer 1

您必须将 v-dialog 移出循环：

<template>
    <v-row>
            <v-dialog
                        v-model="dialog"
                        width="500"
                        >
                        <v-card>
                            <v-divider></v-divider>

                            <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                color="primary"
                                text
                                @click="dialog = false"
                            >
                                I accept
                            </v-btn>
                            </v-card-actions>
                        </v-card>
            </v-dialog>
        <v-col v-for="n in 6" :key=n>
            <v-card
            >
                <v-card-actions>
                    <div class="text-center">
                         <v-btn
                            color="primary"
                            @click.stop="dialog=true"
                            >
                            Click Me
                            </v-btn>
                    </div>
                </v-card-actions>
            </v-card>
        </v-col>
  </v-row>
</template>