Почему в диалоговых окнах данные повторяются?

Question

[Pupochkin123]

Имеется data-table:

<v-data-table
            :headers="headers"
            :items="items"
        >
            <template v-slot:item.action="{ item }">
                <v-dialog
                    v-model="dialog_destroy"
                    max-width="400"
                >
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn
                            color="red"
                            dark
                            small
                            depressed
                            outlined
                            v-bind="attrs"
                            v-on="on"
                        >Удалить контакт</v-btn>
                    </template>
                    <v-card>
                        <v-card-title>
                            <span class="headline">Удалить контакт: @{{ item.contact_name }}</span>
                        </v-card-title>
                        <v-card-text>Вы действительно хотите удалить контакт?</v-card-text>
                        <v-card-actions>
                            <v-btn
                                color="green"
                                text
                                v-bind:href="item.destroy_link"
                            >Подтвердить</v-btn>
                            <v-spacer></v-spacer>
                            <v-btn
                                text
                                v-on:click="dialog_destroy = false"
                            >Отменить</v-btn>
                        </v-card-actions>
                    </v-card>
            </template>
        </v-data-table>

Имеется скрипт:

new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: () => ({
                drawer: true,
                dialog_info: false,
                dialog_destroy: false,
                headers: [{
                    text: 'Контактное лицо',
                    value: 'contact_name',
                    align: 'start'
                }, {
                    text: 'Телефон',
                    value: 'phone',
                    align: 'center'
                }, {
                    text: 'Страна, город',
                    value: 'country',
                    align: 'center'
                }, {
                    text: 'Точный адрес',
                    value: 'address',
                    align: 'center'
                }, {
                    text: 'Время доставки',
                    value: 'delivery_time',
                    align: 'center'
                }, {
                    value: 'action',
                    align: 'end',
                    sortable: false
                }],
                items: [{"contact_name":"#222","phone":"#222","country":"#222","address":"#222","delivery_time":"#222","comment":"#222","edit_link":"http:\/\/127.0.0.1:8000\/dashboard\/contacts\/edit\/2","destroy_link":"http:\/\/127.0.0.1:8000\/dashboard\/contacts\/2\/destroy"},{"contact_name":"No Name","phone":"88001234567sda","country":"dsasdasda","address":"asdsdadsa","delivery_time":"10:00 - 12:00","comment":"asdsdasaddsa","edit_link":"http:\/\/127.0.0.1:8000\/dashboard\/contacts\/edit\/1","destroy_link":"http:\/\/127.0.0.1:8000\/dashboard\/contacts\/1\/destroy"}]
            })
        })

Почему при нажатии на "удалить окно" (при открытии диалогового окна) данные item.contact_name повторяются?

Answer 1

[0xD34F]

Не повторяются.

Поскольку управление отображением всех диалогов завязано на одно и то же свойство (v-model="dialog_destroy"), то при открытии любого из них открываются все и вы всегда видите только последний - он скрывает собой остальные.

Пусть видимостью диалогов управляют разные свойства:

data: () => ({
  showDialog: {},
  ...
}),

<v-dialog v-model="showDialog[item.свойствоИмеющееУникальныеЗначенияДляКаждогоItem]">

<v-btn @click="showDialog[item.свойствоИмеющееУникальныеЗначенияДляКаждогоItem] = false">Отменить

Можно и без дополнительного объекта обойтись, хранить информацию о состоянии диалога среди прочих данных:

<v-dialog v-model="item.showDialog">

<v-btn @click="item.showDialog = false">Отменить

Также можно вынести шаблон диалогового окна за пределы таблицы, чтобы оно было одно на всех:

data: () => ({
  dialogData: null,
  ...
}),

<v-data-table>
  <template #item.action="{ item }">
    <v-btn @click="dialogData = item">Удалить контакт</v-btn>
  </template>
</v-data-table>

<v-dialog :value="!!dialogData" @input="dialogData = $event">
  <span>Удалить контакт: @{{ dialogData?.contact_name }}</span>
  <v-btn :href="dialogData?.destroy_link">Подтвердить</v-btn>
  <v-btn @click="dialogData = null">Отменить</v-btn>
</v-dialog>

Comments

[Pupochkin123]

Подскажите пожалуйста, а как фиксится эта проблема?

[0xD34F]

Pupochkin123, очевидно, следует привести в соответствие количество диалоговых окон количеству переменных, управляющих их отображением. Дополнил ответ.