I have a list of orders which I am populating via the orders
array. Each of these orders have a functionality where the user can edit these orders. I am trying to generate a vuetify dialog box component when the user clicks on the edit button which will have the default data from that order which the user can choose to edit. So far I have tried this,
<tbody class="items">
<tr v-for="order in orders" :key="order.name">
<td></td>
<td></td>
<td></td>
<!-- <td></td> -->
<td></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>
<!-- <component v-bind:is="component"></component> -->
<!-- <EditOrder></EditOrder> -->
<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></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>
but this generates n instances of the dialog box before the actual components loads. I also tried using async components but couldn't figure out where I was wrong.
This is what I think should happen; When the user clicks on the "edit order" button, a dialog box component with the default order details for that particular order must be automatically generated and destroyed. Please correct me if I am wrong.
from Dynamically create Vue Component on click
No comments:
Post a Comment