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

Question

我有一个这样的标签和 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 时关闭“此”对话框？

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

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

Answer 1

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

每个人都需要 var

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

然后在关闭按钮上

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