My task involves populating a list of orders using the orders array. Each order has an edit functionality that triggers a vuetify dialog box component when clicked, displaying default data for editing. Here's my current approach:
<tbody class="items">
<tr v-for="order in orders" :key="order.name">
<td>{{ order.fullname }}</td>
<td>{{ order.address }}</td>
<td>{{ order.phone }}</td>
<!-- <td>{{ order.orderQuantity }}</td> -->
<td>{{ order.quantity }}</td>
<td v-if="order.status == true">
<v-chip small outlined class="ma-2 chip" color="green">delivered</v-chip>
</td>
<td v-if="order.status == false">
<v-chip small outlined class="ma-2 chip" color="red">in progress</v-chip>
</td>
<td>
<v-dialog v-model="dialog" persistent max-width="290">
<template #activator="{ on, attrs }">
<v-btn icon color="primary" dark v-bind="attrs" v-on="on"> Open Dialog </v-btn>
</template>
<v-card>
<v-card-title class="headline"> Use Google's location service? </v-card-title>
<v-card-text>{{ phone }}</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text @click="dialog = false"> Disagree </v-btn>
<v-btn color="green darken-1" text @click="dialog = false"> Agree </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</td>
</tr>
</tbody>
However, I'm facing an issue where multiple instances of the dialog box are generated prematurely. I attempted to use async components but couldn't identify the mistake.
My desired outcome is to automatically display and remove a dialog box with default order details when the "edit order" button is clicked. Any corrections or suggestions would be appreciated.