vuejs / vuetify: сгенерированный список закрытия диалога вручную

Question

У меня есть список меток и vue-color (compact-picker), как это

Результат 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?

Когда я щелкаю за пределами диалогового окна, это диалоговое окно закрывается одно.

Я пытался с v-model, но когда я нажимаю на иконку для открытия диалога, вместо этого открываем все диалоги ...

Answer 1

Вероятно, вы используете одну и ту же переменную для всех v-dialog, и поэтому все они запускаются одновременно.

Вам нужно по VAR для каждого

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

, а затем нажмите кнопку закрытия

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