vuejs / vuetify：手动关闭对话框的生成列表

Posted 2021-03-30

我有一个像这样的标签和vue-color（compact-picker）列表

Result 1

<v-list>
    <v-list-tile
            v-for="sport in filterSports(conso.sports)"
            :key="sport.number"
            @click="sportSelected(sport.number)"
            :class="{'d-none': displaySport(sport)}">
        <v-list-tile-action>
            <v-dialog width="300">
                <v-btn
                        flat
                        slot="activator"
                        color="grey">
                    <v-icon
                            :color="findIconColor(sport.number).color">lens
                    </v-icon>
                </v-btn>
                <v-card>
                    <v-card-title
                            class="subheading grey lighten-2"
                            primary-title>
                        Color picker
                    </v-card-title>
                    <v-card-text>
                        <compact-picker v-model="colors"
                                        @input="setDepColor($event, sport.number)"></compact-picker>
                    </v-card-text>
                    <v-card-actions>
                        <v-layout
                                align-center
                                justify-end>
                            <v-btn @click="closeDialog">
                                <v-icon class="mr-1">done</v-icon>
                            </v-btn>
                        </v-layout>
                    </v-card-actions>
                </v-card>
            </v-dialog>

        </v-list-tile-action>
        <v-list-tile-content
                :class="{ 'grey--text': isSelected(sport)}">
            {{sport.label}}.
        </v-list-tile-content>

    </v-list-tile>
</v-list>

如何用@click=closeDialog点击btn关闭“this”对话框？

当我在对话框外单击时，此对话框将单独关闭。

我尝试使用v-model，但是当我点击图标打开对话框时，vue打开所有对话框而不是...

答案

您可能正在为所有v-dialog使用相同的变量，这就是为什么它们都是同时启动的原因。

每个都需要var

<v-dialog width="300" v-model="sport.show">

然后在关闭按钮上

<v-btn @click="sport.show = false">