Why do dialog boxes repeat data?

Question

Vue.js

There is a 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>

There is a script:

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_nameWhy is the data repeated when clicking on "delete window" (when opening the dialog box) ?

Answer 1

Do not repeat.
Since the display control of all dialogs is tied to the same property ( v-model="dialog_destroy"), when you open any of them, all of them open and you always see only the last one - it hides the rest.
Let the visibility of dialogs be controlled by different properties:

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

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

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

You can do without an additional object, store information about the state of the dialog among other data: You can also move the dialog box template outside the table so that it is the same for all:
<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>